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 |