CSS Shadow Parts

[josepharhar]

This was split from #181

Description

https://drafts.csswg.org/css-shadow-parts/#intro
The ::part() pseudo-element allows an author to style specific, purposely exposed elements in a shadow tree from the outside page’s context.

Rationale

https://drafts.csswg.org/css-shadow-parts/#motivation
For custom elements to be fully useful and as capable as built-in elements it should be possible for parts of them to be styled from outside. Exactly what can be styled from outside should be controlled by the element author. Also, it should be possible for a custom element to present a stable "API" for styling. That is, the selector used to style a part of a custom element should not expose or require knowledge of the internal details of the element. The custom element author should be able to change the internal details of the element while leaving the selectors untouched.

Tests

https://wpt.fyi/results/css/css-shadow-parts

Spec

https://drafts.csswg.org/css-shadow-parts

[gsnedders]

It seems from those tests like we already almost have interop here? These are the only things that aren't passing everywhere today.

[josepharhar]

Yeah I agree this looks pretty good already.
It looks like the two failing test cases were added by @andruud and @fergald

[emilio]

I believe http://wpt.live/css/css-shadow-parts/interaction-with-nested-pseudo-class.html is not necessarily valid fwiw... :focus for the outer tree is the host element itself (gets retargeted just like activeElement).

[emilio]

Err, nevermind... That said it seems to already work manually? So maybe just a bug in the test.

[foolip]

In the MDN short survey on APIs & JavaScript, "Web Components (custom elements, Shadow DOM, etc.)" was the most popular choice by a fairly wide margin, selected by ~39% of survey takers.

Web Components was split into many granular proposals, and the survey results don't tell us which aspects web developers want the most, but it's fair to say that something about Web Components is important. (I'm posting this comment on each of the split proposals.)

[nairnandu]

Thank you for proposing CSS Shadow Parts for inclusion in Interop 2023.

We wanted to let you know that this proposal was not selected to be part of Interop this year. When we looked at the results in WPT, we found that this feature is already largely interoperable between browsers and does not need increased attention.

For an overview of our process, see the proposal selection summary. Thank you again for contributing to Interop 2023!

Posted on behalf of the Interop team.