ShadowRoot

Интерфейс ShadowRoot API Shadow DOM является корневым узлом поддерева DOM, которое отображается отдельно от основного дерева DOM документа.

Вы можете получить ссылку на тень элемента, используя его свойство Element.shadowRoot, при условии, что оно было создано с помощью Element.attachShadow() с параметром mode установленным в значение open.

ShadowRoot.activeElement Только для чтения

Возвращает Element в дереве тени, у которого есть фокус.

ShadowRoot.adoptedStyleSheets

Добавляет массив созданных таблиц стилей, которые будут использоваться поддеревом Shadow DOM. Они могут быть совместно использованы с другими поддеревьями DOM, которые используют тот же родительский узел Document, и самим документом.

ShadowRoot.clonable Только для чтения

Логическое значение, указывающее, можно ли клонировать корень тени.

ShadowRoot.delegatesFocus Только для чтения

Логическое значение, указывающее, делегирует ли корень тени фокус, если выбран нефокусируемый узел.

ShadowRoot.fullscreenElement Только для чтения

Элемент, который в данный момент находится в полноэкранном режиме для этого дерева тени.

ShadowRoot.host Только для чтения

Возвращает ссылку на элемент DOM, к которому прикреплен ShadowRoot.

ShadowRoot.innerHTML

Устанавливает или возвращает ссылку на дерево DOM внутри ShadowRoot.

ShadowRoot.mode Только для чтения

Режим ShadowRoot, либо open, либо closed. Это определяет, доступны ли внутренние функции корня тени из JavaScript.

ShadowRoot.pictureInPictureElement Только для чтения

Возвращает Element в дереве тени, которое в данный момент отображается в режиме «картинка в картинке».

ShadowRoot.pointerLockElement Только для чтения

Возвращает Element, установленный в качестве цели для событий мыши, пока указатель заблокирован. null если блокировка ожидается, указатель разблокирован или если целевой элемент находится в другом дереве.

ShadowRoot.serializable Только для чтения

Логическое значение, указывающее, может ли корень тени быть сериализован. Сериализуемый корень тени внутри элемента будет сериализован функциями Element.getHTML() или ShadowRoot.getHTML(), когда параметр options.serializableShadowRoots установлен в true. Это устанавливается при создании корня тени.

ShadowRoot.slotAssignment Только для чтения

Возвращает строку, содержащую тип назначения слота, либо manual, либо named.

ShadowRoot.styleSheets Только для чтения

Возвращает StyleSheetList объектов CSSStyleSheet для таблиц стилей, явно связанных с деревом тени или встроенных в него.

ShadowRoot.getAnimations()

Возвращает массив всех объектов Animation, которые в данный момент действуют, а их целевые элементы являются потомками дерева тени.

ShadowRoot.getSelection() Нестандартный

Возвращает объект Selection, представляющий выбранный пользователем диапазон текста или текущую позицию курсора.

ShadowRoot.elementFromPoint() Нестандартный

Возвращает самый верхний элемент по заданным координатам.

ShadowRoot.elementsFromPoint() Нестандартный

Возвращает массив всех элементов по заданным координатам.

ShadowRoot.setHTMLUnsafe()

Парсит строку HTML в фрагмент документа без очистки, который затем заменяет исходное поддерево shadowroot. Строка HTML может содержать декларативные shadow root, которые будут обработаны как элементы шаблона, если HTML был задан с помощью ShadowRoot.innerHTML.

Следующие события доступны ShadowRoot через событие «подъёма» от HTMLSlotElement:

HTMLSlotElement slotchange события

Событие, генерируемое при изменении узлов внутри слота.

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

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

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() мы получаем ссылку на shadow DOM с помощью Element.shadowRoot. Отсюда мы используем стандартные методы обхода DOM для поиска элемента <style> внутри shadow DOM и затем обновляем найденный CSS:

function updateStyle(elem) {
  const shadow = elem.shadowRoot;
  const childNodes = shadow.childNodes;
  for (const node of childNodes) {
    if (node.nodeName === "STYLE") {
      node.textContent = `
div {
  width: ${elem.getAttribute("l")}px;
  height: ${elem.getAttribute("l")}px;
  background-color: ${elem.getAttribute("c")};
}
      `;
    }
  }
}