Background

There’s some desire to write “isomorphic stylesheets” that would work for both a document and in shadow roots (WICG/webcomponents#909, WICG/webcomponents#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.

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:

/* 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:

@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.