В процессе перевода.

 

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

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

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

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

Синтаксис

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 false
    element.shadowRoot === null; // returns true
    

Возвращает

Вернёт a ShadowRoot или null.

Исключения

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

Примеры

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

//Create a class for the element
class 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 element
customElements.define('word-count', WordCount, { extends: 'p' });

Спецификации

Specification Status Comment
DOM
Определение 'attachShadow()' в этой спецификации.
Живой стандарт  

Совместимость браузеров

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Базовая поддержкаChrome Полная поддержка 53Edge Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания Under consideration
Firefox Полная поддержка 63
Полная поддержка 63
Нет поддержки 59 — 65
Отключено
Отключено From version 59 until version 65 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 40Safari Полная поддержка 10WebView Android Полная поддержка 53Chrome Android Полная поддержка 53Edge Mobile Нет поддержки Нет
Замечания
Нет поддержки Нет
Замечания
Замечания Under consideration
Firefox Android Полная поддержка 63
Полная поддержка 63
Нет поддержки 59 — 65
Отключено
Отключено From version 59 until version 65 (exclusive): this feature is behind the dom.webcomponents.shadowdom.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Полная поддержка 40Safari iOS Полная поддержка 10Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

 

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, klimentru1986, Sparks
Обновлялась последний раз: mdnwebdocs-bot,