[WICG/webcomponents] Pushing Styles into Shadow DOM (`@shadow` rules) (Issue #1053)

In the discussion around #909, one requirement that has been brought up repeatedly is for a mechanism whereby the website can define Styles that would apply inside a web component's shadow DOM.

Generally speaking, the requirement comes down to something like this:

> As a user of web components, I want to override styles inside the shadow DOM beyond what it allows for with `:part()`s. I do not want to or cannot modify the internal state of the custom element nor its source code to achieve this.

As a starting point for discussion, I'd like to propose something like this:

```css
/* Document-level style-sheet */
@shadow (my-element) {
   p { color: red; }
}
```

It seems reasonable to restrict this only to `mode="open"` shadow DOMs, and that this should be applied to nested shadow DOMs out of the box. The selector for the actual element could be a complete selector including combinators, or could be restricted to element names with at least one `-`

In the discussion around #909 several other mechanisms have been proposed to achieve this.

@knowler [suggested](https://github.com/WICG/webcomponents/issues/909#issuecomment-1995152805) using a `:shadowroot` pseudo-class inside `@scope` rules to scope styles to the root of the shadow DOM, effectively pushing these styles into the shadow DOM in the process.

@jaredcwhite [proposed](https://github.com/WICG/webcomponents/issues/909#issuecomment-1997926646) using `:shadowdom` inside a `@scope` block to select elements inside the shadow-dom attached to the scope's root node.

There's probably more that I'm missing.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/1053
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/1053@github.com>