Skip to content

fix(runtime-vapor): take in account parent component scopeid on nested slot#14326

Merged
edison1105 merged 4 commits intovuejs:minorfrom
steel97:fix/scopeid-nested-slot
Jan 16, 2026
Merged

fix(runtime-vapor): take in account parent component scopeid on nested slot#14326
edison1105 merged 4 commits intovuejs:minorfrom
steel97:fix/scopeid-nested-slot

Conversation

@steel97
Copy link
Copy Markdown

@steel97 steel97 commented Jan 15, 2026

Setting scoped style class (defined in parent component) in nested slot is ignored in vapor mode, example:
vapor repl

This worked before, on vdom:
vdom repl

Also works with this PR:
PR repl

I dig into runtime code, looks like scopeId is taken from slot owner, which is set within withVaporCtx.
However, when there are more than one nested components, rendered code produces more than one withVaporCtx. So, child component takes scopeId from last withVaporCtx call.

I'm not sure how to fix it in right way, so I mark PR as a draft, feel free to close if it not good solution.
What I propose in this PR is to mark instances used in withVaporCtx and then look for latest parent in hierarchy marked as slot owner.

Current unit tests are passing, looks like I did not break anything. I also added basic test which check whether correct scope Id is set.

Results:
Without PR (see first link):
3.6.0-beta.3

With PR:
fix

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Jan 15, 2026

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Jan 16, 2026

Size Report

Bundles

File Size Gzip Brotli
compiler-dom.global.prod.js 85.5 kB 30 kB 26.4 kB
runtime-dom.global.prod.js 108 kB 40.7 kB 36.6 kB
vue.global.prod.js 167 kB 60.8 kB 54.2 kB

Usages

Name Size Gzip Brotli
createApp (CAPI only) 48.3 kB 18.9 kB 17.3 kB
createApp 57.3 kB 22 kB 20.1 kB
createApp + vaporInteropPlugin 78.5 kB 29 kB 26.4 kB
createVaporApp 27.9 kB 10.7 kB 9.83 kB
createSSRApp 61.6 kB 23.9 kB 21.7 kB
defineCustomElement 63.3 kB 23.9 kB 21.8 kB
overall 72.1 kB 27.3 kB 24.9 kB

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Jan 16, 2026

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14326
npm i https://pkg.pr.new/@vue/compiler-core@14326
yarn add https://pkg.pr.new/@vue/compiler-core@14326.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14326
npm i https://pkg.pr.new/@vue/compiler-dom@14326
yarn add https://pkg.pr.new/@vue/compiler-dom@14326.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14326
npm i https://pkg.pr.new/@vue/compiler-sfc@14326
yarn add https://pkg.pr.new/@vue/compiler-sfc@14326.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14326
npm i https://pkg.pr.new/@vue/compiler-ssr@14326
yarn add https://pkg.pr.new/@vue/compiler-ssr@14326.tgz

@vue/compiler-vapor

pnpm add https://pkg.pr.new/@vue/compiler-vapor@14326
npm i https://pkg.pr.new/@vue/compiler-vapor@14326
yarn add https://pkg.pr.new/@vue/compiler-vapor@14326.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14326
npm i https://pkg.pr.new/@vue/reactivity@14326
yarn add https://pkg.pr.new/@vue/reactivity@14326.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14326
npm i https://pkg.pr.new/@vue/runtime-core@14326
yarn add https://pkg.pr.new/@vue/runtime-core@14326.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14326
npm i https://pkg.pr.new/@vue/runtime-dom@14326
yarn add https://pkg.pr.new/@vue/runtime-dom@14326.tgz

@vue/runtime-vapor

pnpm add https://pkg.pr.new/@vue/runtime-vapor@14326
npm i https://pkg.pr.new/@vue/runtime-vapor@14326
yarn add https://pkg.pr.new/@vue/runtime-vapor@14326.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14326
npm i https://pkg.pr.new/@vue/server-renderer@14326
yarn add https://pkg.pr.new/@vue/server-renderer@14326.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14326
npm i https://pkg.pr.new/@vue/shared@14326
yarn add https://pkg.pr.new/@vue/shared@14326.tgz

vue

pnpm add https://pkg.pr.new/vue@14326
npm i https://pkg.pr.new/vue@14326
yarn add https://pkg.pr.new/vue@14326.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14326
npm i https://pkg.pr.new/@vue/compat@14326
yarn add https://pkg.pr.new/@vue/compat@14326.tgz

commit: 5139bac

@@ -160,6 +160,8 @@ export function getScopeOwner(): VaporComponentInstance | null {
*/
export function withVaporCtx(fn: Function): BlockFn {
const owner = currentInstance as VaporComponentInstance
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The correct fix should be

const owner = getScopeOwner()

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow, that's interesting, it works! I thought currentSlotOwner would be null there. Thanks for hint, will fix

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In App.vue, the currentSlotOwner is always the instance of App. I have already changed the code.
Thank you for your contribution.

@edison1105 edison1105 added wait changes scope: vapor related to vapor mode labels Jan 16, 2026
@edison1105 edison1105 marked this pull request as ready for review January 16, 2026 01:56
@edison1105 edison1105 merged commit 7324791 into vuejs:minor Jan 16, 2026
15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: vapor related to vapor mode

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants