Re: [WICG/webcomponents] "open-stylable" Shadow Roots (#909)

So here is a proposal.

This [repository](https://github.com/htmlcomponents/shadow-layers) contains a Shadow Layers proposal to address ["open-stylable" Shadow Roots #909](https://github.com/WICG/webcomponents/issues/909) with a "proof of concept" implementation using TDD Web Platform Tests.

Shadow Layers proposes to extend CSS cascade layers when used in the inner context of shadow trees so that document-level CSS from the context outside a shadow tree can be referenced, priortized, and brought in as layers inside the context of a shadow tree.

This proposal addresses the original use case of this issue, as well as a number of closely related issues.

In an @layer statement rule inside a shadow tree:

```css
@layer buttons, inherit.BETTER-BUTTONS;
```

Or in an attribute on the shadow host element:

```html
<custom-element shadowlayers="buttons, inherit.BETTER-BUTTONS">
</custom-element>
```

To bring in all of a document's CSS as a layer named "inherit" inside a shadow tree:

```css
@layer inherit;
```

To bring in a layer from a parent shadow tree into a child shadow tree:

```css
@layer revert.BETTER-BUTTONS;
```

You can find a longer description including background, use cases addressed, and POC implementation notes in the [repository](https://github.com/htmlcomponents/shadow-layers).


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

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