feat(vapor): scopeId

[edison1105]

No description provided.

[netlify]

✅ Deploy Preview for vapor-repl ready!

Name	Link
🔨 Latest commit	6c5ebf4
🔍 Latest deploy log	https://app.netlify.com/projects/vapor-repl/deploys/685a6bfc0df69f00083fdb37
😎 Deploy Preview	https://deploy-preview-13422--vapor-repl.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Important

Review skipped

Draft detected.

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.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch edison/feat/setScopeId

---

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

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@13422

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@13422

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@13422

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@13422

@vue/compiler-vapor

npm i https://pkg.pr.new/@vue/compiler-vapor@13422

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@13422

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@13422

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@13422

@vue/runtime-vapor

npm i https://pkg.pr.new/@vue/runtime-vapor@13422

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@13422

@vue/shared

npm i https://pkg.pr.new/@vue/shared@13422

vue

npm i https://pkg.pr.new/vue@13422

@vue/compat

npm i https://pkg.pr.new/@vue/compat@13422

commit: 1338683

[LittleSound]

Relevant Information

Scope ID is an important mechanism in Vue used for implementing style scoping (Scoped CSS). Its main role is style isolation and scope passing.

In slot content, both the parent component's scopeId and the child component's scopeId (with a -s suffix) are included. This ensures that the slot content can inherit the parent component's styles while maintaining the child component's style isolation.

[LittleSound]

The discussion of Team Vapor is as follows:

There are actually many ways to partition CSS by component. Vue already supports more than one approach, and the previous Scope ID method wasn’t necessarily the most performant one.

So, if we’re unsure about doing it right at the moment — or if the current direction feels problematic — we don’t have to implement it just yet. We can always revisit it later if there’s a clear need from users.

For Vapor, where performance is a key focus, CSS Modules might actually be a better choice. Vite already has good support for them, so the implementation could be simpler and more efficient.

Native CSS @scope could be the ultimate solution, but browser support requirements are too high right now. The current implementation is designed for VDOM compatibility, but my implementation isn't great and has poor performance — this may need Evan‘s advice

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
compiler-dom.global.prod.js	84.5 kB	30 kB	26.4 kB
runtime-dom.global.prod.js	105 kB (+157 B)	39.6 kB (+36 B)	35.7 kB (+32 B)
vue.global.prod.js	163 kB (+157 B)	59.8 kB (+45 B)	53.2 kB (+58 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47.6 kB (+160 B)	18.6 kB (+51 B)	17 kB (+48 B)
createApp	56.4 kB (+160 B)	21.7 kB (+44 B)	19.8 kB (+31 B)
createApp + vaporInteropPlugin	89 kB (+596 B)	33.3 kB (+181 B)	30.1 kB (+190 B)
createVaporApp	33.1 kB (+668 B)	12.6 kB (+215 B)	11.5 kB (+194 B)
createSSRApp	60.7 kB (+164 B)	23.5 kB (+49 B)	21.4 kB (+49 B)
defineCustomElement	61.4 kB (+160 B)	23.3 kB (+56 B)	21.2 kB (+47 B)
overall	71.3 kB (+157 B)	27.1 kB (+43 B)	24.6 kB (+38 B)

[edison1105]

re-impl via #14004