Šta je 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>
`;