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-элементов.