-
-
Notifications
You must be signed in to change notification settings - Fork 8k
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
Deep selectors don't work if child component has multiple root elements #6861
Comments
I'd call this expected behaviour fom the way scoped styles and deep selectors work. This is the generated CSS: [data-v-472cff63] h1 {
color: red;
} As you can see, it requires a parent element bearing the parent's scope-id. the normal usecase would be to apply a deep rule in the context of a parent element, i.e.: .some-parent-class :deep(h1) {
} |
I think it's also a normal usage in my example. As a user I don't need to know about how scoped CSS works. We just expect that it works.
Why? What if we apply parent scope id to every child component even if it has multiple root elements, and we change the generated CSS to: [data-v-472cff63] h1, [data-v-472cff63]h1 {
color: red;
} so that it applies in all situations? I don't know if there are some other pitfalls or considerations. |
A better workaround: ~ :deep(h1),
:deep(h1) {
color: red;
} |
@abitwhy That's clever but won't work if I move |
Vue version
3.2.40
Link to minimal reproduction
https://sfc.vuejs.org/#eNqVUkFOwzAQ/IrxpSA1NgFOIaqKuPADLrmUeKGBOLbWThGq8nfWTtomBUVw88zuzo493vMHa8WuBZ7x3JVYWc8c+NauiqbS1qBnj0Zb9opGs4WQAYT2xaScTurp0JDLXpCkCHjQtt54IMRYvk1XT1DXhj0brNVFLomIhbhNns5pBLkcjRN0/qsG5kpjQcXeTAHYy216xfYBMlaa2mDGENR9ILpoJ0xRO1/y3nyiN1a8O9PQ7eNcMRRcwbODUsHpOgEXfOu9dZmUbWM/3kRptFxTTWLb+EpDooxe34obcXctVeX8mBfgdPKC5tMB0saCL0fiksgdYILQKEDA2WVnvZOFZ7UfS4eX6OgBDkH+kvtcbqraxUMfYRA5RkeUXSnoZytDMkGMWPIWhmYznIRz/ET/NDc4Sk+/aWKI+F7hbz66b2z3D40=
Steps to reproduce
See the preview in SFC playground.
What is expected?
Both child components should be affected by the deep selector rule.
What is actually happening?
The deep selector only affects the one with a single wrapping root element.
System Info
No response
Any additional comments?
No response
The text was updated successfully, but these errors were encountered: