Shadow dom в HTML

Question

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

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

Лучшее объяснение, которое я нашел это от What the Heck is Shadow DOM? показано ниже:

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

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

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

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

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

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

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

См. Introduction to the Shadow DOM.