csswg-drafts
csswg-drafts copied to clipboard
[scoping] Direct parent of a :host-context()
I have a custom element <my-elem>
and I would like only the one whose parent with class row
to be affected:
<style>
/* ... */
:host-context(.row >) > div {
background-color: blue;
}
</style>
<div class=".row">
<div>
<my-elem>
<div>DIV!</div>
<main>MAIN!</main>
<aside>ASIDE!</aside>
</my-elem>
</div>
<div>
<div class=".row">
<my-elem>
<div>DIV!</div> <!-- Only this element -->
<main>MAIN!</main>
<aside>ASIDE!</aside>
</my-elem>
<div>
<my-elem>
<div>DIV!</div>
<main>MAIN!</main>
<aside>ASIDE!</aside>
</my-elem>
This doesn't seem possible, because >
at the end of the selector is not valid.
There is a reason for this? If so, how can I do without?
This is currently intentionally impossible - the :host-context()
selector only takes a compound selector (only evaluating on one element, with no combinators), to make it faster and easier to evaluate, as :host-context() is already somewhat expensive to do correctly.