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

Echoing @justinfagnani "[Maybe a layer based system  would work ..."](https://github.com/WICG/webcomponents/issues/909#issuecomment-1889740959), @LeaVerou [Potential solution 2 "stylesheet is imported but as a different CSS layer"](https://github.com/WICG/webcomponents/issues/909#issuecomment-1936910846), @knowler [Host layerable shadow roots](https://github.com/w3c/csswg-drafts/issues/9792), [#986](https://github.com/WICG/webcomponents/issues/986) and others:

I am working on a project with declarative shadow DOM and cascade layers and it has changed my approach to this longstanding issue.

First, declarative templates are a natural and intuitive way to give users an I-Know-What-I-Am-Doing path into a shadow tree:

```html
<my-component>
  <template shadowrootmode="open" />
    {default styles here}
    {customizing styles here}
    elements in shadow tree here
  </template>
  slotted content
</my-component>
```

In short, a declarative Web component can be more like a customizable pattern than a closed box with limited entry points.

Second, I now more want to just "inherit" outer cascade layers into a shadow tree:

- Sometimes, I want the page's reset or button styles in a shadow tree.
- And sometimes, I want the outer styles to win.
- And sometimes, I want the inner styles to win.
- And sometimes, I want to let all the outer styles in, but at a low priority, not the default high priority of unlayered styles.

By "inherit", I mean "adopt", "include", "import", or just "use", all of which might be better terms.

But "inherit" is a CSS-wide keyword that is (in cascade level 5) a conveniently available [reserved-for-future-use](https://drafts.csswg.org/css-cascade-5/#layer-names) layer name.

Inside a shadow tree with @layer:

```css
@layer inherit.reset, inherit.buttons, shadow-buttons;
// or
@layer inherit, shadow-buttons;
```

Or in an attribute:

```html
<template 
  shadowrootmode="open inherit.reset inherit.buttons" >
</template>
// or
<template 
  shadowrootmode="open"
  inheritlayers="inherit.reset inherit.buttons" >
</template>
```

The layer name "inherit" would mean all of the outer styles, layered or not. "inherit.reset" would be the outer reset layer. Another naming syntax could also work.

To me, @layer seems more intuitive because it states access and priority in a single declarative syntax. But attachShadow() might also need an inheritLayers option.

@mirisuzanne notes the risk of [conflating styling access with styling priority](https://github.com/w3c/csswg-drafts/issues/9792#issuecomment-1890787533). But I assume access would happen in the cascade [context step](https://drafts.csswg.org/css-cascade-5/#cascade-context), before the layer step.

I am hoping that the implementation blocker to [evaluating a selector across shadow boundaries](https://github.com/WICG/webcomponents/issues/909#issuecomment-742851382) doesn't apply to layers, after all user-agent styles are already layer-like allowed in.

I hope this group will look seriously at bringing outer cascade layers into shadow trees.

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

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