Re: [csswg-drafts] [css-scoping] Allow elements to expose a subset of their shadow tree, which can then be styled with regular CSS (#10939)

> [@sorvell](https://github.com/sorvell) if we co-opt parts we’ll have to decide on whether or not putting the part in the “exposed shadow tree” list adds the element the part is on and it’s children, or only its children.
> 
> seems like if it’s the element with the ::part, then we might also need to decide if adding that part to the “exposed tree” list removes it from the parts list. if it’s exposed via the exposed tree AND via ::part styles, that seems a) redundant and b) ripe for style clashes.
> 
> if it’s only the children then that might be a little counterintuitive for what `part=` does today, which applies to the element itself (but not its children ha)

I think these should be different mechanisms (though I suspect it will organically lead to `::part` being much less used). I see some value in having these two concepts be orthogonal, whereas conflating them seems to add no value and a lot of problems, as you point out. The exposed tree should make sense as a whole, whereas parts can be one-off. Also, there may be value in adding `part` to an exposed element for backwards compatibility, so it definitely shouldn't _remove_ it from the exposed tree.

> > I just had an idea about how this could be exposed: we already have a concept of an exposed shadow tree: open shadow roots!
> 
> [@LeaVerou](https://github.com/LeaVerou) I would love this. Would that also mean global styles like `button {}` apply to the exposed elements, or would we be forced to use combinators? Former would be my preference, but sounds like a significant breaking change.

In that model, open shadow trees are "everything is exposed by default", which would apply to existing open shadow roots, so having to use a combinator is necessary. But `open-stylable` would enable exactly what you want.

---

Thinking some more about this, I think the direction in https://github.com/w3c/csswg-drafts/issues/10939#issuecomment-3439115852 is the right one. We keep stumbling on these "partial encapsulation" use cases, not just on the CSS side, but also the DOM side, and we keep introducing increasingly more awkward primitives to solve them.

A big problem making this tricky to do well is how to support the DOM side of this. Even if a subtree is fully exposed, if one of its ancestors isn't, you shouldn't be able to go `el.shadowRoot.querySelector(".foo").parentNode.parentNode.parentNode` and access the unexposed ancestor, but the web component itself should be able to access the full tree. So it should either be different objects altogether (heavy!), or a deep Proxy (also heavy). 🤔 

-- 
GitHub Notification of comment by LeaVerou
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10939#issuecomment-4215140966 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 9 April 2026 14:45:14 UTC