ShadowRoot: свойство adoptedStyleSheets

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

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

Таблицы стилей в свойстве adoptedStyleSheets учитываются вместе с другими таблицами стилей тени. Для определения окончательных вычисленных CSS любого элемента они рассматриваются как добавленные после других таблиц стилей в тени (ShadowRoot.styleSheets).

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

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

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

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

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

// Create an empty "constructed" stylesheet
const sheet = new CSSStyleSheet();
// Apply a rule to the sheet
sheet.replaceSync("a { color: red; }");

Затем мы создаём ShadowRoot и передаём объект таблицы в adoptedStyleSheets в массиве.

// 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 sheet into the shadow DOM
shadow.adoptedStyleSheets = [sheet];

Мы всё ещё можем изменять таблицы стилей после их добавления в массив. Ниже мы добавляем новое правило в ту же таблицу с помощью CSSStyleSheet.insertRule().

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

Новые таблицы стилей могут быть добавлены в документ или корень тени с помощью adoptedStyleSheets.push():

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

// Concat the new sheet.
shadow.adoptedStyleSheets.push(extraSheet);

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