W3C home > Mailing lists > Public > public-css-archive@w3.org > February 2018

[csswg-drafts] [selectors] Selectors in ::slotted don’t affect specificity

From: Surma via GitHub <sysbot+gh@w3.org>
Date: Sun, 04 Feb 2018 15:36:28 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-294205980-1517758587-sysbot+gh@w3.org>
surma has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors] Selectors in ::slotted don’t affect specificity ==
Let’s say I have a custom element `<my-elem>`, that has the following shadow root markup:

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

```html
<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. Afaict, 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](https://slotted-specificity.glitch.me/), [code](https://glitch.com/edit/#!/slotted-specificity))

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2271 using your GitHub account
Received on Sunday, 4 February 2018 15:36:46 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:26:46 UTC