Bug 229438 – Incorrect specificity with ::slotted

• Component: CSS
• Status: RESOLVED FIXED

[Jeroen Zwartepoorte]

https://codepen.io/jpzwarte/pen/oNwNdpN?editors=0110

In Chromium and Firefox, the background is hotpink. In Safari and STP, the background is green.

This is the CSS for the web component:
```css
      :host([foo]) ::slotted(h1) {
        --background: hotpink;
      }
      ::slotted(h1) {
        --background: green;
      }

```

[Jeroen Zwartepoorte]

Workaround is to switch the rules. (hotpink last)

[Emilio Cobos Álvarez (:emilio)]

Created attachment 436385 [details]
Patch

[Emilio Cobos Álvarez (:emilio)]

Gah, Ryosuke, you nerd-sniped me :)

Hoping there's something in WPT for this, if not not sure I'll have the cycles to finish this soon, I'm taking a long weekend off computers :)

[Emilio Cobos Álvarez (:emilio)]

https://github.com/web-platform-tests/wpt/pull/30181 has a test.

[Antti Koivisto]

Maybe import the WPT before landing

[Emilio Cobos Álvarez (:emilio)]

Created attachment 436619 [details]
Patch for landing

[EWS]

Committed r281692 (241042@main): <https://commits.webkit.org/241042@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 436619 [details].

[Radar WebKit Bug Importer]

<rdar://problem/82436071>

[Ryosuke Niwa]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #3)
> Gah, Ryosuke, you nerd-sniped me :)
> 
> Hoping there's something in WPT for this, if not not sure I'll have the
> cycles to finish this soon, I'm taking a long weekend off computers :)

Thanks for the fix!