Document: adoptedStyleSheets property
The adoptedStyleSheets
property of the Document
interface is used for setting an array of constructed stylesheets to be used by the document.
Note: A constructed stylesheet is a stylesheet created programmatically using the CSSStyleSheet()
constructor (as compared to one created by a user-agent when importing a stylesheet from a script, imported using <style>
and @import
, or linked to via <link>
).
The same constructed stylesheets can also be shared with one or more ShadowRoot
instances using the ShadowRoot.adoptedStyleSheets
property. Changing an adopted stylesheet will affect all the objects that adopt it.
Stylesheets in the property are evaluated along with the document's other stylesheets using the CSS cascade algorithm. Where the resolution of rules considers stylesheet order, adoptedStyleSheets
are assumed to be ordered after those in Document.styleSheets
.
Only stylesheets created using the CSSStyleSheet()
constructor within the context of the current Document
may be adopted.
Value
The value is an array of CSSStyleSheet()
instances that must have been created using the CSSStyleSheet()
constructor within the context of the same Document
.
If the array needs to be modified, then a new array must be assigned (in-place mutations like push()
will throw an exception). Note however that the CSSStyleSheet()
instances themselves can be modified, and these changes will apply wherever the stylesheet is adopted.
Exceptions
-
NotAllowedError
DOMException
-
One of the CSSStyleSheet
instances in the array was not created using the CSSStyleSheet()
constructor or was constructed in a different document than the current document, such as one in a frame.
Examples
Adopting a stylesheet
The code below shows a stylesheet being constructed, and then CSSStyleSheet.replaceSync()
is called to add a rule to the sheet. The stylesheet is then added to an array and assigned to the adoptedStyleSheets
property.
const sheet = new CSSStyleSheet();
sheet.replaceSync("a { color: red; }");
document.adoptedStyleSheets = [sheet];
We can append a new rule to the stylesheet using CSSStyleSheet.insertRule()
.
sheet.insertRule("* { background-color: blue; }");
Append a new stylesheet
To append a whole new stylesheet to the adoptedStyleSheets
property we have to create and assign a new combined array. This is demonstrated below using spread-syntax:
const extraSheet = new CSSStyleSheet();
extraSheet.replaceSync("p { color: green; }");
document.adoptedStyleSheets = [...document.adoptedStyleSheets, extraSheet];
Sharing a stylesheet with a shadow DOM
We can share a stylesheet to a shadow root in a similar way.
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });
shadow.adoptedStyleSheets = [sheet];
Specifications
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
adoptedStyleSheets |
73 |
79 |
101 |
No |
60 |
16.4 |
73 |
73 |
101 |
50 |
16.4 |
11.0 |
See also