[scoping] Selectors in ::slotted don’t affect specificity

[surma]

Let’s say I have a custom element <my-elem>, that has the following shadow root markup:

<style>
  /* ... */
  ::slotted(main) {
    background-color: blue;
  }
  ::slotted(*) {
    background-color: red;
  }
</style>
<slot></slot>

<my-elem>
  <div>DIV!</div>
  <main>MAIN!</main>
  <aside>ASIDE!</aside>
</my-elem>

I’d argue most authors would expect <main> to have a blue background color, but it is in fact red. AFACIT, this is currently per spec. Selectors passed to ::slotted() don’t affect specificity. So precedence is defined by order of declaration.

Was this intentional? If so, why? If not, is it changeable?

(Live demo, code)

[emilio]

This is also related to #1915, and also (loosely) to #2158 / #1027.

Note that the spec as of right now doesn't do any kind of special-casing, so :host and :host-context should also not have any particular specificity rules, but @lilles mentioned there why he thought it's unfortunate.

[Nadya678]

Workaround

<style>
  /* ... */
  :root ::slotted(main) 
  {
    background-color: blue;
  }
  ::slotted(*) 
  {
    background-color: red;
  }
</style>
<slot></slot>

I think it should work like :not() for specificity calculation.

[surma]

This has been addressed in #1915. Closing this.