The CSSStyleSheet()
constructor creates a new CSSStyleSheet
object which represents a single Stylesheet.
After constructing a stylesheet the CSSStyleSheet.replace()
, CSSStyleSheet.replaceSync()
, CSSStyleSheet.insertRule()
, and CSSStyleSheet.deleteRule()
methods can be used to modify the rules of the new stylesheet.
A stylesheet created using this method is referred to as a "constructed stylesheet". A constructed stylesheet can be shared between a document and its shadow DOM subtrees using ShadowRoot.adoptedStyleSheets
and Document.adoptedStyleSheets
.
new CSSStyleSheet()
new CSSStyleSheet(options)
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.
const sheet = new CSSStyleSheet();
sheet.replaceSync("a { color: red; }");
We then create a ShadowRoot
and pass the sheet object to the ShadowRoot.adoptedStyleSheets
property inside an array.
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });
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 same sheet can be shared with multiple shadow subtrees in the same document. For more examples see ShadowRoot.adoptedStyleSheets
.