csswg-drafts icon indicating copy to clipboard operation
csswg-drafts copied to clipboard

[scoping] Direct parent of a :host-context()

Open Zefling opened this issue 2 years ago • 1 comments

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?

Zefling avatar Oct 18 '22 07:10 Zefling

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.

tabatkins avatar Oct 18 '22 17:10 tabatkins