[css-scoping][selectors] Should :where(:host) work? #6420
Comments
LeaVerou
added
selectors-4
|
I'm confused, how is this related to <!doctype html>
<style>
:where(.foo) {
display: block;
}
</style>
<div class="foo" hidden>Can you see me?</div> |
|
Yeah, the The host element not matching :where() is according to spec right now (nothing matches the element unless explicitly specified to do so), but :where() and :is() are definitely special-cases in that they're effectively selector grammar, not selectors themselves. I think it would be reasonable to allow them to match the host element, so long as one of their contained selectors does. I don't know how UAs currently implement the featureless thing, tho, so I'm not sure if it's a big deal to extend to :where()/:is() or not. |
|
Ah, right, brain fart, thanks @emilio. Still, it would be good if authors were able to style |
|
What you describe should already be working, as rules from outside the shadow tree go before (non-important) rules from inside the shadow tree: <!doctype html>
<style>
[hidden] { display: none }
</style>
<div id="host" hidden>Can you see me?</div>
<script>
document.getElementById("host").attachShadow({ mode: "open" }).innerHTML = `<style>:host { display: block }</style>`;
</script> |
It'd be slightly annoying to implement the digging into |
|
FWIW I ran into a use case today, involving custom selectors as well. I wanted to abstract away a certain aspect of my web component, so I tried defining these: @custom-selector :--horizontal :is(
:host-context(bar-chart:not([orientation])),
:host-context(bar-chart:not([orientation])) *,
:host-context(bar-chart[orientation="horizontal"]),
:host-context(bar-chart[orientation="horizontal"]) *
);
@custom-selector :--vertical :is(
:host-context(bar-chart[orientation="vertical"]),
:host-context(bar-chart[orientation="vertical"]) *
);But alas, it didn't work because |
|
|
|
Closing as a dupe of #5093 . |
|
Never mind, not a dupe, just semantically close to what I was working on. ^_^ |
|
Okay now it's fixed, by 066ede4. (Logical combinations work on featureless elements, but still only match against the explicitly-defined set of selectors.) |
Currently, the root of a web component can only be selected via
:hostand its varieties (:host(),:host-context()etc). [spec]Because
:hosthas a specificity of0,1,0, it can interfere with UA styles, such as those that set[hidden] { display: none }. For that reason, authors are instructed to explicitly account for that in every web component they write by adding this to the component's stylesheet:Not only is this a hassle for authors, but entirely unrealistic to expect that all authors will fall in line and follow this. In practice, we'll just end up with a lot of components that break
hidden.But even beyond the
hiddenattribute, it should be possible to specify host styles that do not override existing UA or author styles.The whole point of
:where()is to rectify exactly that kind of problem, however:where(:host)does not currently work. Is there a way to fix that?cc @tabatkins
The text was updated successfully, but these errors were encountered: