-
Notifications
You must be signed in to change notification settings - Fork 680
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
[css-nesting] Make nesting work in :host
rules
#9496
Comments
I think this is like #9025, but for |
What selectors don't work, precisely? There's already spec text defining how Nesting interacts with things like
Is your problematic example already covered by that text? If so, it's an impl bug. If not, I'd love to see it, so we can see if we can address the issue. |
It seems that browsers haven't implemented that |
|
Nm, it does indeed say that it should work, in the definition of "featureless" |
This seems to work correctly in Chrome and Firefox now. |
I'm trying to style a custom element with various states (like I cannot do :host([foo]) {
...
&:hover {
...
}
} Instead i have to write :host([foo]) { ... }
:host([foo]:hover) { ... } This does work, but doesn't win any awards for clean code: [foo] {
:host(&) {
...
}
&:hover {
:host(&) {
...
}
}
} It would be nice if we could do nesting in combination with |
When styling elements in Shadow DOM, combinators can be used with the
:host
selector to select elements in theshadowRoot
(e.g.:host > div { ... }
). These rules do not currently work with CSS nesting.It's not clear if this is a bug or omission or intentional (hope not) via the language at https://drafts.csswg.org/css-nesting/#nesting.
Note that the behavior of combinators next to
:host
is somewhat unique in that the tree traversed is the shadow tree, not the tree in the scope of the host element. This likely(?) means this needs a specific callout in the spec.The text was updated successfully, but these errors were encountered: