-
-
Notifications
You must be signed in to change notification settings - Fork 8.7k
feat(vapor): scopeId #13422
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: minor
Are you sure you want to change the base?
feat(vapor): scopeId #13422
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
…serts during non-hydration (#13220)
…sertionState (#13057)
… in `v-for` (#13187)
…preserved (#13009)
…on state (#13492)
…tate (#13041)
…y watching props (#13384)
…copeId
No description provided.