Что такое Shadow DOM?

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

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

• Shadow Host: Элемент DOM, к которому прилагается Shadow DOM.
• Shadow Tree: Изолированное поддерево DOM.
• Shadow Boundary: Граница между Shadow DOM и основным документом.
• Shadow Root: Корневой узел Shadow Tree. Создается с помощью element.attachShadow({ mode: 'open' | 'closed' }):
  • open: Shadow Root доступен извне через element.shadowRoot.
  • closed: Shadow Root не доступен извне.

Преимущества:

• Инкапсуляция стилей: Стили, определенные в Shadow DOM, не просачиваются наружу и не влияют на основной документ. Стили из основного документа по умолчанию не влияют на Shadow DOM, но это можно контролировать.
• Инкапсуляция DOM: Элементы внутри Shadow DOM не видны в основном DOM-дереве, что предотвращает случайное пересечение селекторов и манипуляций.
• Инкапсуляция поведения: Логика и обработчики событий могут быть изолированы в Shadow DOM.

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

javascript