ShadowRoot: adoptedStyleSheets property

Value

The value is an array of CSSStyleSheet instances that must have been created using the CSSStyleSheet() constructor within the context of the shadow root's parent Document.

If the array needs to be modified, use in-place mutations like push(). The CSSStyleSheet instances themselves can also be modified, and these changes will apply wherever the stylesheet is adopted.

In an earlier version of the specification, the array was not modifiable, so the only way to add new stylesheets was to assign a new array to adoptedStyleSheets.

Examples

Adopting a stylesheet

The code below first shows a stylesheet 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 adoptedStyleSheets 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 still 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.

Append a new stylesheet

New stylesheets can be appended to the document or shadow root by using adoptedStyleSheets.push():

const extraSheet = new CSSStyleSheet();
extraSheet.replaceSync("p { color: green; }");

// Concat the new sheet.
shadow.adoptedStyleSheets.push(extraSheet);

Specifications

Browser compatibility

See also

• Constructable Stylesheets (web.dev)
• Using the Shadow DOM
• CSSStyleSheet() constructor
• CSSStyleSheet.replaceSync()
• CSSStyleSheet.replace()
• CSSStyleSheet.insertRule()
• CSSStyleSheet.deleteRule()