Shadow DOM - это веб-стандарт, позволяющий инкапсулировать DOM и CSS внутри компонента. Он создает отдельное, изолированное дерево DOM, называемое "теневым деревом" (shadow tree), прикрепленным к элементу в основном документе, называемому "теневым корнем" (shadow root).
Преимущества Shadow DOM:
- Изоляция CSS: Стили, определенные внутри Shadow DOM, не "утекают" наружу, влияя на основной документ, и наоборот, стили из основного документа по умолчанию не влияют на Shadow DOM.
- Изоляция DOM: Структура Shadow DOM скрыта от основного документа и не доступна через стандартные методы выбора (например,
querySelector).
- Изоляция JavaScript: Скрипты, выполняющиеся в основном документе, не могут легко получить доступ к элементам внутри Shadow DOM.
- Повторное использование: Созданные компоненты с Shadow DOM могут быть легко использованы в других частях приложения или даже на других веб-сайтах.
Создание Shadow DOM:
javascript
Особенности:
- Слоты (Slots): Позволяют вставлять внешнее содержимое в определенные места внутри Shadow DOM.
- Теневые части (Shadow Parts): Позволяют стилизовать определенные элементы внутри Shadow DOM извне.
Shadow DOM является ключевым компонентом для создания веб-компонентов (Web Components), предоставляя сильную инкапсуляцию, необходимую для создания переиспользуемых и самодостаточных UI-элементов.