JavaScript Document adoptedStyleSheets Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ADOPTEDSTYLESHEETS

Definition

Document.adoptedStyleSheets is an array of constructed CSSStyleSheet objects applied to the document (MDN). You build sheets with new CSSStyleSheet(), add rules in JavaScript, then adopt them so they join the normal CSS cascade.

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use document.adoptedStyleSheets. Start with this line.

JavaScript
document.adoptedStyleSheets
CallWhat it does
document.adoptedStyleSheetsPrimary signature.

Built into the browser. Read or assign document.adoptedStyleSheets — no import required.

Library declarations
JavaScript
document.adoptedStyleSheets

Parameters

ParameterDescription
new CSSStyleSheet()Required. Constructed sheet in this document
Rules (replaceSync / insertRule)Required. Fill or update CSS text
adoptedStyleSheetsRequired. Registers the sheet on the document
Feature detectOptional. Guard older browsers

Return Value

Return ValueDescription
*The current value of document.adoptedStyleSheets.

JavaScript Examples

Example 1 — Adopt a Constructed Stylesheet

Create a sheet, fill it with replaceSync, then push it onto the document.

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

document.adoptedStyleSheets.push(sheet);
console.log(document.adoptedStyleSheets.length);
Try It Yourself

How It Works

  1. Construct. new CSSStyleSheet() builds an empty sheet in this document.
  2. Fill rules. replaceSync sets the whole stylesheet text in one call.
  3. Adopt. push registers the sheet without wiping other adopted sheets.
  4. Result. Links can turn red; length shows how many adopted sheets you manage.

Example 2 — Update Live with insertRule()

After adoption, append another rule—every adopter updates immediately.

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

sheet.insertRule("* { background-color: #eff6ff; }");
console.log(sheet.cssRules.length);
Try It Yourself

How It Works

  1. Adopt first. The sheet is already on adoptedStyleSheets.
  2. Insert a rule. insertRule adds one CSS rule to the live sheet.
  3. No re-push. Mutating the sheet object is enough—the document keeps the same reference.
  4. Count rules. cssRules.length becomes 2 (original + inserted).

Example 3 — Share One Sheet with Shadow DOM

The same constructed sheet styles both the document and an open shadow root.

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

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

console.log(shadow.adoptedStyleSheets[0] === sheet);
Try It Yourself

How It Works

  1. One instance. Document and shadow adopt the same sheet object.
  2. Shadow assignment. shadow.adoptedStyleSheets = [sheet] attaches it to the shadow tree.
  3. Shared updates. Later insertRule / replaceSync calls update every adopter.
  4. Identity check. === is true because both arrays hold the same reference.
Compatibility

Browser Support

Document.adoptedStyleSheets is Baseline Widely available on MDN (since March 2023). Constructed stylesheets work across modern evergreen browsers.

✓ Baseline · Widely available

Document.adoptedStyleSheets

Mutable CSSStyleSheet[] for constructed styles — share across document and Shadow DOM.

96% Modern browser support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
adoptedStyleSheets Excellent

Bottom line: Safe for modern web apps. Feature-detect with "adoptedStyleSheets" in document and fall back to <style> injection when needed. Not available in Internet Explorer.

Frequently Asked Questions

It holds an array of constructed CSSStyleSheet objects applied to the document. You create sheets with new CSSStyleSheet() in the same document, then push or assign them onto adoptedStyleSheets.
No. MDN marks Document.adoptedStyleSheets as Baseline Widely available (since March 2023). It is not Deprecated, Experimental, or Non-standard.
Create a sheet with new CSSStyleSheet(), add rules with replaceSync() or insertRule(), then push it onto document.adoptedStyleSheets. You can also assign a new array if you need a full replace.
Yes. The same CSSStyleSheet instance can be adopted on document.adoptedStyleSheets and on shadowRoot.adoptedStyleSheets. Editing the sheet updates every adopter.
Only sheets constructed with CSSStyleSheet() in the current document may be adopted. Sheets from another document (for example an iframe) throw a NotAllowedError DOMException when added.
Adopted sheets participate in the normal CSS cascade. MDN states they are treated as coming after sheets in document.styleSheets when stylesheet order matters.

Next: alinkColor

Learn the deprecated active-link color property and the modern CSS :active replacement.

alinkColor tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Document activeViewTransition Property JavaScript Document alinkColor Property