Что такое Shadow DOM?

Shadow DOM — это веб-стандарт, позволяющий инкапсулировать DOM-дерево и стили внутри компонента, изолируя их от остальной части документа.

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

• Shadow tree: Собственное DOM-дерево, прикрепленное к элементу.
• Shadow boundary: Граница, отделяющая Shadow DOM от основного документа.
• Shadow host: Элемент, к которому прикреплен Shadow DOM.
• Shadow root: Корневой узел Shadow tree.

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

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

Создание Shadow DOM:

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // mode: 'open' - доступен из JavaScript; 'closed' - нет

shadowRoot.innerHTML = `
  <style>
    /* Стили только для этого Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Это контент Shadow DOM</p>
`;