[csswg-drafts] [css-scoping] @-rule to specify light DOM CSS rules within Shadow DOM styles (#10941)

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-scoping] @-rule to specify light DOM CSS rules within Shadow DOM styles ==
A recurring pain point around defining WC styling is that shadow DOM CSS is too limited to target what authors actually want to target. A common use case is targeting slotted (light DOM) descendants and/or relationships between slotted elements. 

WCs today can always inject light DOM CSS the first time an instance of a WC is created or connected, but it is nontrivial to do well, and very easy to do wrong, which creates a footgun. The easy option would be to inject it in e.g. `document.head`, which means it does not get applied in any ancestor scopes (when you have nested shadow roots). Additionally, because this CSS needs to use regular selectors (rather than `:host`) it cannot support customizing element names or scoped registries. Not to mention that it requires CSS to be maintained in two separate places (or to jump through hoops so that the same CSS file can be used in both places).

An easy solution to this would be a new @-rule (`@light`? `@global`?), the contents of which are evaluated in the context of the light DOM, except `:host` still works. So for example this would work:

```html
<foo-tree>
 <ul>
  <li>
 </ul>
</foo-tree>
```

```css
@light {
 :host ul > li {
  list-style: ...
 }
}
```

Just like any other @-rule, it can also be combined with nesting to keep related styles together. E.g. the rule above could also be written as:

```css
:host {
 @light {
  ul > li {
   list-style: ...
  }
 }
}
```

There is a lot of precedent in frameworks for being able to have this kind of escape hatch (e.g. Svelte’s `:global`, Vue’s `:global()` etc).

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10941 using your GitHub account


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

Received on Tuesday, 24 September 2024 17:21:59 UTC