[csswg-drafts] [css-cascade][css-scoping] Allow layers to use different names in different contexts (#10091)

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

== [css-cascade][css-scoping] Allow layers to use different names in different contexts ==
## Background

There’s some desire to write “isomorphic stylesheets” that would work for both a document and in shadow roots (https://github.com/WICG/webcomponents/issues/909, https://github.com/WICG/webcomponents/issues/986). This can be problematic, especially with layers since they are often context-specific conventions. Requiring a consumer of a web component to use the same layer names is problematic (it makes the component hard to use), just as expecting the author of a web component to know what layers a consumer is using (enforcing a layering convention on consumers seems unreasonable).

This proposal isn’t focused on how external styles can _access_ a shadow root, but rather seeks to improve the adaptability of layering when styles are used in different contexts.

## Syntax

The proposed syntax would extend the existing layering syntax:

```css
/* As a layer statement rule (useful when sharing entire stylesheets) */
@layer
  defaults as (reset in one-element, base in another-element),
  components as (elements in one-element, blocks in another-element);

/* As a layer block rule (useful when applying a subset of styles to another context) */
@layer defaults as (reset in one-element, base in another-element) {

}
```

The syntax structure would be:

```css
@layer <layer-name> as (<inner-context-layer-name> in <selector-with-inner-context>)
```

The selector would effectively match with `:host()`, e.g. if `:host(another-element)` use `base` as the layer name.

If no layer name for a specific inner context is given, the original layer name would be used.

If a context has already established its layering order, when subsequent layer statement rules appear with contextual layer names, those layer names become associated with the corresponding names in the existing order (they do not modify the order).

## Use cases

Ideally, this proposal would be complementary to an happy-path way to apply external styles to a shadow root either as a whole or in part. Even without that happy-path, I do believe it can be useful for web component authors who already are supporting ways to inject external styles into their shadow roots.

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


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

Received on Friday, 15 March 2024 17:14:29 UTC