Дом теней в HTML

Question

Я недавно слышал о Shadow DOM. Во время просмотра видео о выпуске Angular 2 ведущий неоднократно упоминал Shadow DOM без четких выражений. Что на самом деле означает Shadow DOM?

Answer 1

Лучшее объяснение, которое я нашел, это из " Что, черт возьми, это Shadow DOM"? показано ниже:

Теневой DOM относится к способности браузера включать поддерево элементов DOM в рендеринг документа, но не в основное дерево DOM документа.

Важный вариант использования будет с элементами управления видео на веб-странице. Разметка показывает только тег видео с некоторыми атрибутами и тегами источника. Дополнительный код для всех работающих видео операций скрыт в Shadow DOM и недоступен для остальной части страницы. Фактическая разметка, javascript и стили для тега инкапсулированы, что скрывает детали реализации элементов управления видео, которые уже написаны каждым поставщиком браузера.

Так что пока он есть в DOM, он скрыт от страницы, которая его отображает. Итак, для просмотра Shadow DOM вы можете включить его в разделе Dev Tools в Chrome.

Короткий ответ: Shadow DOM - одна из четырех технологий, составляющих веб-компоненты.

Для определения, веб-компоненты: Компонентная платформа от W3C, которая позволяет создавать веб-сайты из стандартизированных строительных блоков. Веб-компоненты включают пользовательские элементы, Shadow DOM и HTML-импорт и шаблоны.

Shadow DOM - это технология веб-компонентов (хотя каждый может использоваться отдельно):

1. Пользовательские элементы: это возможность создания собственных пользовательских HTML-тегов и элементов. Они могут иметь свое собственное скриптовое поведение и стиль CSS. Они являются частью веб-компонентов, но также могут использоваться сами по себе.
2. Шаблоны HTML. Элемент шаблона HTML представляет собой механизм для хранения содержимого на стороне клиента, которое не должно отображаться при загрузке страницы, но может впоследствии быть создано в ходе выполнения с использованием JavaScript. Думайте о шаблоне как о фрагменте контента, который сохраняется для последующего использования в документе.
3. Shadow DOM: обеспечивает инкапсуляцию для JavaScript, CSS и шаблонов в веб-компоненте. Shadow DOM делает так, чтобы эти вещи оставались отдельными от DOM основного документа. Вы также можете использовать Shadow DOM отдельно от веб-компонента.
4. HTML Imports: предназначен для создания механизма упаковки веб-компонентов, но вы также можете использовать HTML Imports сам по себе. Вы импортируете файл HTML, используя тег в документе HTML.

См. Введение в Shadow DOM.

Answer 2

Это относится к возможности создания "дочернего" DOM, полностью изолированного от остальной части страницы. Полезно для веб-компонентов, многократно используемых "виджетов", которые позволяют не беспокоиться о том, что их css/js влияют на то, что им не следует. http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

Проверьте https://www.polymer-project.org/ если вы хотите увидеть его в действии.

Answer 3

Думайте о теневом DOM как о инкапсулированном (частном) DOM. Вы не можете получить доступ к теневому DOM так же, как и к обычному DOM, например, document.querySelector().

Допустим, вы определили настраиваемый элемент многократного использования (который содержит его DOM-деревья). Затем вы используете пользовательский элемент в вашем приложении HTML.

Теперь под DOM (который теперь называется "хост-элемент") стал поддельным поддеревом DOM (под теневым корнем), скрытым от родительской структуры!

Я надеюсь, что это поможет вам немного.