CSSStyleSheet: CSSStyleSheet() constructor

options Optional

An object containing the following:

baseURL Optional

A string containing the baseURL used to resolve relative URLs in the stylesheet.

media Optional

A MediaList containing a list of media rules, or a string containing a single rule.

disabled Optional

A Boolean indicating whether the stylesheet is disabled. False by default.

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);

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.

• Constructable Stylesheets (web.dev)
• Using the Shadow DOM
• construct-style-sheets-polyfill