JavaScript Document adoptedStyleSheets Property

What You’ll Learn

The adoptedStyleSheets property holds an array of constructed CSSStyleSheet objects applied to the document. Learn how to build styles with new CSSStyleSheet(), adopt them with push(), update rules live with insertRule(), and share sheets with Shadow DOM—with five examples and try-it labs.

Introduction

Most pages load CSS from <link> tags or @import. A constructed stylesheet is different: you create it in JavaScript with new CSSStyleSheet() and add rules programmatically.

document.adoptedStyleSheets is where those constructed sheets are registered on the document. Once adopted, their rules participate in the normal CSS cascade—MDN notes they are ordered after document.styleSheets when specificity and order are resolved.

Related Document tutorials: Document constructor, activeElement. Shadow roots use the same idea via shadowRoot.adoptedStyleSheets.

Understanding Document.adoptedStyleSheets

An instance property whose value is an array of CSSStyleSheet instances. Each sheet must have been created with the CSSStyleSheet() constructor in the same document context.

• Value — a mutable array; use push(), splice(), or assign a new array.
• Live updates — changing rules on a sheet updates every document or shadow root that adopted it.
• Cascade — adopted sheets apply alongside regular stylesheets via the CSS cascade algorithm.
• Same-document only — sheets from another document (iframe) throw when adopted.
• Baseline Widely available on MDN (since March 2023).

📝 Syntax

document.adoptedStyleSheets

Value

An array of CSSStyleSheet objects constructed in the current document.

MDN adopt pattern

const sheet = new CSSStyleSheet();
sheet.replaceSync("a { color: red; }");

document.adoptedStyleSheets.push(sheet);

⚖️ adoptedStyleSheets vs Related Ideas

Examples Gallery

Examples follow MDN Document: adoptedStyleSheets. Use View Output or Try It Yourself for each case.

const sheet = new CSSStyleSheet();
sheet.replaceSync("a { color: red; }");

document.adoptedStyleSheets.push(sheet);
// All <a> links on the page can now render red (if no higher-specificity rule wins)

adoptedStyleSheets.length: 1
(link text appears red in supporting browsers)

const sheet = new CSSStyleSheet();
sheet.replaceSync("body { font-family: system-ui; }");
document.adoptedStyleSheets.push(sheet);

sheet.insertRule("* { background-color: #eff6ff; }");
// The document background updates without re-adopting the sheet

sheet.cssRules.length: 2
(page background becomes light blue)

const sheet = new CSSStyleSheet();
sheet.replaceSync("p { color: teal; font-weight: bold; }");
document.adoptedStyleSheets.push(sheet);

const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });
shadow.innerHTML = "<p>Inside shadow</p>";
shadow.adoptedStyleSheets = [sheet];

Same sheet instance on document + shadow
(both <p> elements styled teal and bold)

const canAdopt =
  "adoptedStyleSheets" in document &&
  typeof CSSStyleSheet === "function";

console.log({
  canAdopt,
  currentCount: canAdopt ? document.adoptedStyleSheets.length : "N/A"
});

{
  "canAdopt": true,
  "currentCount": 0
}

const sheet = new CSSStyleSheet();
sheet.replaceSync("h1 { letter-spacing: 0.05em; }");
document.adoptedStyleSheets.push(sheet);

console.log({
  adoptedCount: document.adoptedStyleSheets.length,
  styleSheetsCount: document.styleSheets.length,
  adoptedIsSameRef: document.adoptedStyleSheets[0] === sheet
});

{
  "adoptedCount": 1,
  "styleSheetsCount": 3,
  "adoptedIsSameRef": true
}

🚀 Common Use Cases

• Design systems — one token sheet shared by document and web components.
• Runtime theming — swap rules without reloading CSS files.
• Micro-frontends — inject scoped constructed sheets on navigation.
• Shadow DOM styling — reuse the same CSSStyleSheet instance.
• Testing — programmatic styles without editing HTML <link> tags.
• Performance — avoid duplicate parsed stylesheets when sharing one object.

🔧 How Adoption Works

📝 Notes

• MDN: Baseline Widely available (since March 2023) — no Deprecated / Experimental / Non-standard banner.
• Only CSSStyleSheet() instances from the current document may be adopted.
• Prefer in-place array mutations (push) over reassigning when adding one sheet.
• Editing a shared sheet updates document and every shadow root that adopted it.
• Sheets from another frame/document throw a DOMException when adopted.
• Related: Document constructor, ownerDocument, JavaScript hub.

💡 Best Practices