w3c / w3c/csswg-drafts

[css-cascade-5] Add a R/W `CSSStyleSheet.layer` attribute for the layer name

Open
#7,002 19 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Closed Accepted by CSSWG Resolution css-cascade-5 Needs Edits
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

(Edit: fixed some details on settings)

I'm proposing extending the CSSStyleSheet interface with a new attribute, layer.

On getting, it should return the layer name if the sheet is entirely in some cascade layer. In particular:

  • If this is an @import-ed stylesheet, return the layerName attribute value of the CSSImportRule
  • If this stylesheet is added via a <link> element (depending on https://github.com/whatwg/html/issues/7540), then return the name of that layer
  • If this is a constructed stylesheet with a layer name previous set by JS (see below), return that layer name
  • Otherwise, return null

On setting:

  • If this is a constructed stylesheet and the new value is a non-null string, then the attribute value can be modified, and the stylesheet is treated as entirely in the given layer
  • If this is a constructed stylesheet and the new value is null, then the attribute value can be modified, and the stylesheet is treated as unlayered
  • Otherwise, throws a NotAllowedError DOMException

The primary use case is to allow adding layered constructed stylesheets, especially if the stylesheet is a 3rd party CSS module, and we want to use that to set up a web component (which we currently don't have a good way to make it layered):

import sheet from 3p-foo.css;

sheet.layer = 'new-layer';
shadowRoot.adoptedStylesheets = [sheet];

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the CSSStyleSheet and CSSImportRule definitions in the CSSWG draft, then review the dependency on WHATWG HTML issue #7540 for behavior. Done means the getter, setter, layer-treatment, and NotAllowedError requirements are resolved in the relevant specification text with working-group agreement.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.