Что такое Shadow DOM?

Shadow DOM — это веб-стандарт, позволяющий инкапсулировать HTML-структуру, CSS-стили и поведение JavaScript внутри веб-компонента, не затрагивая остальную часть DOM. Он создает отдельное, изолированное дерево DOM (Shadow Tree) внутри обычного DOM-элемента.

Основные концепции Shadow DOM:

• Shadow Host: Элемент в обычном DOM, к которому прикреплен Shadow Tree.
• Shadow Tree: Изолированное sub-дерево DOM, прикрепленное к Shadow Host.
• Shadow Boundary: Граница между Shadow DOM и обычным DOM. Стили и скрипты не просачиваются через эту границу.
• Shadow Root: Корневой узел Shadow Tree.

Пример создания Shadow DOM:

javascript