CSSStyleSheet: CSSStyleSheet() constructor
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
* Some parts of this feature may have varying levels of support.
The CSSStyleSheet() constructor creates a new CSSStyleSheet object which represents a single Stylesheet.
After constructing a stylesheet the CSSStyleSheet.replace(), CSSStyleSheet.replaceSync(), CSSStyleSheet.insertRule(), and CSSStyleSheet.deleteRule() methods can be used to modify the rules of the new stylesheet.
A stylesheet created using this method is referred to as a "constructed stylesheet".
A constructed stylesheet can be shared between a document and its shadow DOM subtrees using ShadowRoot.adoptedStyleSheets and Document.adoptedStyleSheets.
Syntax
new CSSStyleSheet()
new CSSStyleSheet(options)
Parameters
optionsOptional-
An object containing the following:
baseURLOptional-
A string containing the
baseURLused to resolve relative URLs in the stylesheet. mediaOptional-
A
MediaListcontaining a list of media rules, or a string containing a single rule. disabledOptional-
A
Booleanindicating whether the stylesheet is disabled. False by default.
Examples
In the following example, a new CSSStyleSheet is constructed with a media rule of "print".
Printing StyleSheet.media to the console returns a MediaList with a single entry for this print rule.
let stylesheet = new CSSStyleSheet({ media: "print" });
console.log(stylesheet.media);
Sharing stylesheets with a shadow DOM
The code below shows the sheet being constructed and then CSSStyleSheet.replaceSync() is called to add a rule to the sheet.
// Create an empty "constructed" stylesheet
const sheet = new CSSStyleSheet();
// Apply a rule to the sheet
sheet.replaceSync("a { color: red; }");
We then create a ShadowRoot and pass the sheet object to the ShadowRoot.adoptedStyleSheets property inside an array.
// Create an element in the document and then create a shadow root:
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });
// Adopt the sheet into the shadow DOM
shadow.adoptedStyleSheets = [sheet];
We can modify the stylesheets after they have been added to the array.
Below we append a new rule to the same sheet using CSSStyleSheet.insertRule().
sheet.insertRule("* { background-color: blue; }");
// The document will now have blue background.
The same sheet can be shared with multiple shadow subtrees in the same document.
For more examples see ShadowRoot.adoptedStyleSheets.
Specifications
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-cssstylesheet-cssstylesheet |
Browser compatibility
Loading…