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

Updating the [shadow layers proposal](https://github.com/WICG/webcomponents/issues/909#issuecomment-1993388146), [readme](https://github.com/htmlcomponents/shadow-layers), and [user story tests](https://github.com/WICG/webcomponents/issues/1052#issuecomment-2021652637) in response to:

@knowler [Allow layers to use different names in different contexts #10091](https://github.com/w3c/csswg-drafts/issues/10091)

@mayank99 [interweaving priorities of inner and outer context layers](https://github.com/WICG/webcomponents/issues/909#issuecomment-2012215949)

@mayank99 [referencing and ordering of unlayered layers (?)](https://github.com/WICG/webcomponents/issues/909#issuecomment-2013269579), see [Allow authors to explicitly place unlayered styles in the cascade layer order #6323](https://github.com/w3c/csswg-drafts/issues/6323)

@mirisuzanne ["So we absolutely want ways to put sheets or scopes (or whatever) into layers."](https://github.com/WICG/webcomponents/issues/909#issuecomment-2011014948)

@mirisuzanne [referencing named @sheet groups ("If we just want easy access to named chunks of CSS, we have @sheet")](https://github.com/WICG/webcomponents/issues/909#issuecomment-2011014948) (see [Multiple stylesheets per file #5629](https://github.com/w3c/csswg-drafts/issues/5629))

The updated syntaxes below are polyfillable (and thus require no change to how @layer currently works), as demonstrated in the [user story tests](https://github.com/htmlcomponents/shadow-layers/tree/main/user-story-tests).

**Adding a layer renaming syntax:**

- **`inherit.reset.as.shadowreset`**: uses an `as` keyword to assign a different layer name to an outer context layer when inherited into a shadow tree's inner context.

```css
//Inherit resets layer as higher priority renamed layer:
@layer inherit.resets.as.shadowresets, resets, shadowresets;

//Inherit resets layer as lower priority renamed layer:
@layer inherit.resets.as.shadowresets, shadowresets, resets;

//Interweave priorities of outer and inner context layers:
@layer inherit.A.as.outerA, inherit.B.as.outerB, outerA, A, B, outerB;
```

The .as. items can appear in any order in the @layer statement rule, because the renamed layer name must also appear in the @layer statement rule.

**Inherit @scope page style**

The user story "Inherit @scope page style" that brings an outer context @scope rule into a shadow tree was already handled in the original shadow layers proposal, but now works with layer renaming. See user story test 17 "[Inherit @scope page style](https://github.com/WICG/webcomponents/issues/1052#issuecomment-2021652637)".

**Adding a group referencing mechanism**

- **inherit.unlayered:** inherits outer context unlayerd page styles
- **inherit.layered:** inherits outer context layered page styles

```css
//Inherit unlayered page styles as layer named unlayered:
@layer inherit.unlayered.as.unlayered, unlayered;

//Interweave priorities of outer layered and unlayered styles:
@layer inherit.layered.as.layered, inherit.unlayered.as.unlayered, layered, A, B, unlayered;

//Inherit all outer page styles:
@layer inherit.layered.as.layered, inherit.unlayered.as.unlayered, layered, unlayered;
```

**@sheet**

- **inherit.sheet.sheetname:** inherits outer context @sheet as an inner context layer

[At-rule support detection in @supports](https://www.bram.us/2022/01/20/detect-at-rule-support-with-the-at-rule-function/) is not available, so @sheet would not be polyfillable (see [Multiple stylesheets per file #5629](https://github.com/w3c/csswg-drafts/issues/5629)), so the shadow layers POC does not implement @sheet. However, @layer is widely deployed so polyfillability is not needed for it, and @layer also provides the essential priority mechanism.

Nonetheless, an @sheet supporting syntax would be possible:

```css
//Inherit named @sheet as layer
@layer inherit.sheet.mysheet.as.mysheet, mysheet;
```


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

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