-
Notifications
You must be signed in to change notification settings - Fork 910
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
Nested functional components break SFC CSS scoping #1259
Comments
Related to #1136. |
i encountered the same problem, but the scope is of this bug is wider. styles dont even get correctly applied if you have a normal component with scoped styles and a functional component with scoped styles as the root element inside. i tried to locate the problem, but could only get this far, that i think it isnt a problem of vue-loader. the emitted content from build looks fine and every component gets their scope ID passed correctly. styles are also injected correctly. the problem is that some the problem is maybe somewhere here: https://github.com/vuejs/vue/blob/dev/src/core/vdom/patch.js#L320 where only the scopeId of the functional component is set and not that from parents. I would recommend to reopen this issue in the vue repository. |
If it's just an attribute applied to a functional component - is there a way to pass bind this id? For example we have a similar bug when class is lost when you use
So now outside class will be correctly added. Maybe there is some similar prop where parent scoped id lives? |
Not contributing much to de discussion, but the described behavior, as far as I can remenber, is not a bug, it is meant behavior, hence the presence of Thought, It would be great to at least have access to that |
Version
14.2.2
Reproduction link
https://github.com/darkylmnx/Vue-Functional-Component-CSS-Scope-Bug
Steps to reproduce
When I have nested functional components, CSS scoping seems to bug
Navigate to the page and you'll see the bug
What is expected?
I'm expecting to see correct isolated styles
![image](https://user-images.githubusercontent.com/1426357/39329057-7f7fc1be-499d-11e8-957f-17d2cf08e12c.png)
What is actually happening?
My styles are messed up
![image](https://user-images.githubusercontent.com/1426357/39328959-410100ba-499d-11e8-8542-76bfa9f687b2.png)
Ftm, I had to use only one level of functional components and this is really painful when dealing with static pages like : about pages and stuff because they only render UI and not any state so it's unfortunate not to take advantage of functional components. Even in a more dynamic case things like the following have messed up styles.
The text was updated successfully, but these errors were encountered: