Элемент: свойство shadowRoot

Свойство Element.shadowRoot — только для чтения, оно представляет собой теневой корень, размещённый в элементе.

Используйте Element.attachShadow(), чтобы добавить теневой корень к существующему элементу.

Экземпляр объекта ShadowRoot, или null, если связанный теневой корень был присоединён с mode, установленным в closed. (См. Element.attachShadow() для получения дополнительной информации).

Следующие фрагменты взяты из нашего примера life-cycle-callbacks (посмотреть в живую), который создаёт элемент, отображающий квадрат заданного размера и цвета, указанных в атрибутах элемента.

Внутри определения класса элемента <custom-square> мы включаем некоторые жизненные циклы обратных вызовов, которые вызывают внешнюю функцию updateStyle(), которая фактически применяет размер и цвет к элементу. Вы увидите, что мы передаём ей this (сам пользовательский элемент) в качестве параметра.

class Square extends HTMLElement {
  connectedCallback() {
    console.log("Custom square element added to page.");
    updateStyle(this);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log("Custom square element attributes changed.");
    updateStyle(this);
  }
}

В самой функции updateStyle() мы получаем ссылку на теневой DOM с помощью Element.shadowRoot. Отсюда мы используем стандартные методы обхода DOM, чтобы найти элемент <style> внутри теневого DOM и затем обновить найденный в нём CSS:

function updateStyle(elem) {
  const shadow = elem.shadowRoot;
  const childNodes = Array.from(shadow.childNodes);

  childNodes.forEach((childNode) => {
    if (childNode.nodeName === "STYLE") {
      childNode.textContent = `
        div {
          width: ${elem.getAttribute("l")}px;
          height: ${elem.getAttribute("l")}px;
          background-color: ${elem.getAttribute("c")};
        }
      `;
    }
  });
}