What if components could expose specific shadow sub-trees for styling?

[mirisuzanne]

The current proposals all take an all-or-nothing approach to the shadow DOM of a given component. The entire component either is, or is not open to page styles. You've added a caveat for some page styles, but what about a caveat for some parts of the shadow DOM? What if we could go further with the concept of a part, allowing individual shadow parts to opt-into light DOM styles? I could imagine both parts that opt themselves in, and parts that opt-in an entire subtree of the shadow DOM.

[bkardell]

Sorry Mia, for some reason I'm having difficulty understanding what you mean bc shadow parts are exposed already... but.. do you mean like selecting into children or something? Can you maybe give some hypothetical pseudo code or something?

[mirisuzanne]

I'm getting at the difference between exposing a part for special targeting (eg only ::part(my-button) styles apply) vs exposing a part to general styles without any special targeting (eg generic button styles apply).

But then also yes: the ability to expose an entire subtree/children rather than a single element at a time.

[kizu]

What would be cool to have: an ability to have some kind of donut scoping for styling, not as slots which accept the light DOM elements from the outside, but for things that are present inside the Shadow DOM itself.

Basically, to say: “This element should be styled as if it was present in the light DOM”.

Example where this kind of thing could be useful: default content of slots. When content is put into a slot from outside — it is in the light DOM. When it is defined as a placeholder content — it is only inside the Shadow DOM, meaning it will be styled differently compared to how it would've been styled if it was passed to the component via a slot.

I can imagine this being a new attribute. scope could be perfect, if only it was not taken by <th>…

[bkardell]

I'm getting at the difference between exposing a part for special targeting (eg only ::part(my-button) styles apply) vs exposing a part to general styles without any special targeting (eg generic button styles apply).

Ah, ok... so like, how do you imagine it though? We had an issue about this I think 🤔 it might even have been my issue... But iirc that had nothing specifically to do with Shadow DOM... like, we have plenty of 'button-like' things and some libraries have better ways of doing that so you don't have to remember or repeat them all . Do you think that's true and Shadow DOM just sort of exacerbates a more general problem that already exists there or is this different?

But then also yes: the ability to expose an entire subtree/children rather than a single element at a time.

You can, you just can't style them in terms of a relationship from the outside. The only way I can think we could allow relationships would be a new combinator, like the old cats & hats/deep etc which we removed at tpac in... 2014?