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.
// Create an empty "constructed" stylesheet
const sheet = new CSSStyleSheet();
// Apply a rule to the sheet
sheet.replaceSync("a { color: red; }");
// Apply the stylesheet to a document
document.adoptedStyleSheets.push(sheet);sheet.insertRule("* { background-color: blue; }");
// The document will now have blue background.// 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 same sheet into the shadow DOM
shadow.adoptedStyleSheets = [sheet];