Element.attachShadow()

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since январь 2020 г..

* Some parts of this feature may have varying levels of support.

Экспериментальная возможность:Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотритетаблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

МетодElement.attachShadow() добавляет теневое DOM дерево к указанному элементу и возвращает ссылку на егоShadowRoot (корневой элемент созданного дерева).

Элементы которые можно добавить в теневой DOM

Обратите внимание, что не каждый элемент можно добавить в корень теневого дерева. Некоторые типы исключены по соображениям безопасности(например<a>), и некоторые другие. Вот список разрешённых элементов:

Любой пользовательский элемент свалидным именем
<article>
<aside>
<blockquote>
<body>
<div>
<footer>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<header>
<main>
<nav>
<p>
<section>
<span>

Синтаксис

var shadowroot = element.attachShadow(shadowRootInit);

Параметры

shadowRootInit

ShadowRootInit содержит следующие поля:

mode: Строка указывающая на режим инкапсуляции для shadowDOM:

open. Указывает на открытие режима инкапсуляции.Это означает что элементы shadowRoot доступны для внешнего мираelement.shadowRoot
```
element.shadowRoot === shadowroot; // returns true
```
closed. Указывает на закрытие режима инкапсуляции.Этот режим запрещает доступ к узлам node(s) и закрывать теневой корень для внешнего мира
```
element.shadowRoot === shadowroot; // returns falseelement.shadowRoot === null; // returns true
```

Возвращает

Вернёт aShadowRoot или null.

Исключения

Исключение	Описание
InvalidStateError	Элемент уже является хостом теневого DOM
NotSupportedError	Вы пытаетесь прикрепить shadow DOM к HTML-элементу с некорректным именем, или к запрещённому элементу. (см. выше)

Примеры

Пример взят из демо компонентаword-count-web-component, так-же доступноlive demo. Вы можете найти метод attachShadow() примерно в середине кода. Метод создаёт корневой элемент теневого DOM к которому потом добавляется содержимое шаблона элемента.

//Create a class for the elementclass WordCount extends HTMLParagraphElement {  constructor() {    // Always call super first in constructor    super();    // count words in element's parent element    var wcParent = this.parentNode;    function countWords(node) {      var text = node.innerText || node.textContent;      return text.split(/\s+/g).length;    }    var count = "Words: " + countWords(wcParent);    // Create a shadow root    var shadow = this.attachShadow({ mode: "open" });    // Create text node and add word count to it    var text = document.createElement("span");    text.textContent = count;    // Append it to the shadow root    shadow.appendChild(text);    // Update count when element content changes    setInterval(function () {      var count = "Words: " + countWords(wcParent);      text.textContent = count;    }, 200);  }}// Define the new elementcustomElements.define("word-count", WordCount, { extends: "p" });