Что такое Shadow DOM?

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:

// Получаем элемент, к которому хотим прикрепить Shadow DOM
const hostElement = document.getElementById('my-component');

// Создаем Shadow Root
// 'open' делает Shadow DOM доступным извне через hostElement.shadowRoot
// 'closed' скрывает Shadow DOM
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Добавляем элементы внутрь Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Стили, специфичные для этого компонента */
    h2 {
      color: blue;
    }
  </style>
  <h2>Заголовок внутри компонента</h2>
  <p>Параграф внутри компонента.</p>
`;

Особенности:

• Слоты (Slots): Позволяют вставлять внешнее содержимое в определенные места внутри Shadow DOM.
• Теневые части (Shadow Parts): Позволяют стилизовать определенные элементы внутри Shadow DOM извне.

Shadow DOM является ключевым компонентом для создания веб-компонентов (Web Components), предоставляя сильную инкапсуляцию, необходимую для создания переиспользуемых и самодостаточных UI-элементов.