Какво е Shadow DOM?

Shadow DOM — това е уеб стандарт, който позволява инкапсулиране на DOM дървото и стиловете вътре в компонент, като ги изолира от останалата част на документа.

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

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

Предимства:

• Изолация на стиловете: Стиловете, дефинирани вътре в Shadow DOM, не влияят на елементите извън него, и обратното.
• Изолация на DOM: Структурата DOM вътре в Shadow DOM не е видима и не е достъпна директно от основния документ, което предотвратява конфликти с id и класове.
• Капсулация: Създава модулни, многократно използваеми компоненти.

Създаване на Shadow DOM:

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

shadowRoot.innerHTML = `
  <style>
    /* Стилове само за този Shadow DOM */
    p {
      color: blue;
    }
  </style>
  <p>Това е съдържанието на Shadow DOM</p>
`;