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
Режимы Shadow DOM:
open: Shadow Root доступен извне через свойство shadowRoot хост-элемента.closed: Shadow Root недоступен извне.
Преимущества Shadow DOM:
- Инкапсуляция: Стили и DOM-структура компонента полностью изолированы. Это предотвращает конфликты стилей и упрощает разработку сложных интерфейсов.
- Повторное использование: Компоненты с Shadow DOM легко переиспользовать в разных частях приложения, не беспокоясь о влиянии на окружение.
- Производительность (потенциально): Браузер может оптимизировать рендеринг изолированных Shadow Trees.
Использование Shadow DOM является ключевым элементом при создании веб-компонентов (Custom Elements), обеспечивая их самодостаточность и переносимость.