[css-cascade-5] Add a R/W `CSSStyleSheet.layer` attribute for the layer name
Nobody has claimed this yet.
- 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 thelayerNameattribute value of theCSSImportRule - 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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