Что такое 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:

// Получаем элемент, который будет хостом
const hostElement = document.getElementById('my-component');

// Создаем Shadow Root
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // mode: 'open' или 'closed'

// Добавляем содержимое в Shadow Tree
shadowRoot.innerHTML = `
  <style>
    /* Эти стили применяются только внутри Shadow DOM */
    h2 {
      color: blue;
    }
  </style>
  <h2>Это заголовок внутри Shadow DOM</h2>
  <p>Это параграф внутри Shadow DOM.</p>
`;

Режимы Shadow DOM:

• open: Shadow Root доступен извне через свойство shadowRoot хост-элемента.
• closed: Shadow Root недоступен извне.

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

• Инкапсуляция: Стили и DOM-структура компонента полностью изолированы. Это предотвращает конфликты стилей и упрощает разработку сложных интерфейсов.
• Повторное использование: Компоненты с Shadow DOM легко переиспользовать в разных частях приложения, не беспокоясь о влиянии на окружение.
• Производительность (потенциально): Браузер может оптимизировать рендеринг изолированных Shadow Trees.

Использование Shadow DOM является ключевым элементом при создании веб-компонентов (Custom Elements), обеспечивая их самодостаточность и переносимость.