Документ: свойство adoptedStyleSheets

Свойство adoptedStyleSheets интерфейса Document используется для задания массива созданных таблиц стилей, которые должны использоваться документом.

Те же созданные таблицы стилей также могут быть разделены с одним или несколькими экземплярами ShadowRoot с помощью свойства ShadowRoot.adoptedStyleSheets. Изменение принятой таблицы стилей повлияет на все объекты, которые её используют.

Таблицы стилей в свойстве оцениваются вместе с другими таблицами стилей документа с использованием алгоритма каскадирования CSS. В местах, где разрешение правил учитывает порядок таблиц стилей, adoptedStyleSheets предполагается упорядочить после тех, что в Document.styleSheets.

Только таблицы стилей, созданные с помощью CSSStyleSheet() конструктора в контексте текущего Document, могут быть приняты.

Значение — массив экземпляров CSSStyleSheet, которые должны быть созданы с помощью CSSStyleSheet() конструктора в контексте того же Document.

Если массив необходимо изменить, используйте локальные мутации, например, push(). Сами экземпляры CSSStyleSheet также могут быть изменены, и эти изменения применятся везде, где таблица стилей принята.

В более ранней версии спецификации массив не был изменяемым, поэтому единственный способ добавить новые таблицы стилей заключался в присвоении нового массива свойству adoptedStyleSheets.

NotAllowedError DOMException

Один из экземпляров CSSStyleSheet в массиве не был создан с помощью CSSStyleSheet() конструктора или был создан в другом документе, например, в фрейме.

Код ниже демонстрирует построение таблицы стилей, а затем вызов CSSStyleSheet.replaceSync() для добавления правила в таблицу. Затем таблица стилей добавляется в массив и присваивается свойству adoptedStyleSheets.

// 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 = [sheet];

Мы можем добавить новое правило к таблице стилей с помощью CSSStyleSheet.insertRule().

sheet.insertRule("* { background-color: blue; }");
// The document will now have blue background.

Чтобы добавить новую таблицу стилей к свойству adoptedStyleSheets, нужно создать и присвоить новый объединённый массив. Это показано ниже с использованием синтаксиса spread:

const extraSheet = new CSSStyleSheet();
extraSheet.replaceSync("p { color: green; }");

// Combine the existing sheets and new one
document.adoptedStyleSheets = [...document.adoptedStyleSheets, extraSheet];

Мы можем аналогичным образом разделить таблицу стилей с корнем тени.

// 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];

• Создаваемые таблицы стилей (web.dev)
• Использование Shadow DOM
• CSSStyleSheet() конструктор
• CSSStyleSheet.replaceSync()
• CSSStyleSheet.replace()
• CSSStyleSheet.insertRule()
• CSSStyleSheet.deleteRule()