Šta je Shadow DOM?

Shadow DOM је веб стандард који омогућава инкапсулацију HTML, CSS и JavaScript-а у засебне, изоловане блокове од главног документа.

Главни концепти:

• Shadow Host: Елемент DOM-а на који се прикачити Shadow DOM.
• Shadow Tree: Изоловано поддрево DOM-а.
• Shadow Boundary: Граница између Shadow DOM-а и главног документа.
• Shadow Root: Језгени чвор Shadow Tree-а. Креира се помоћу element.attachShadow({ mode: 'open' | 'closed' }):
  • open: Shadow Root је доступан споља преко element.shadowRoot.
  • closed: Shadow Root није доступан споља.

Предности:

• Инкапсулација стилова: Стилови дефинисани у Shadow DOM-у не процуре напоље и не утичу на главни документ. Стилови из главног документа по подразумевану не утичу на Shadow DOM, али то може бити контролисано.
• Инкапсулација DOM-а: Елементи унутар Shadow DOM-а нису видљиви у главном DOM-у, што спречава случајно преклапање селектора и манипулације.
• Инкапсулација понашања: Логика и обработници догађаја могу бити изоловани у Shadow DOM-у.

Пример креирања Shadow DOM-а:

// Креирамо нови елемент DIV
const hostElement = document.createElement('div');
// Прикачимо Shadow DOM на елемент
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Додајемо садржај у Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Стил који важи само унутар овог Shadow DOM-а */
    p {
      цолор: плаво;
    }
  </style>
  <p>Ово је текст унутар Shadow DOM-а</p>
`;

// Додајемо хост-елемент у главни документ
document.body.appendChild(hostElement);

Користи се за:

• Креирање поновно коришћених веб-компонената.
• Изолацију стилова страних библиотека.
• Заштиту унутрашњих детаља компонента од спољашњих утицаја.

Особине рада са стиловима:

• Спољашњи стилови по подразумеваној вредности не утичу на Shadow DOM.
• Може се користити :host псевдо-класа за стилизовање самог Shadow Host-а изнутра Shadow DOM-а.
• Може се користити :host-context() за стилизовање на основу контекста Shadow Host-а.
• Може се користити ::slotted() псевдо-елемент за стилизовање елемената постављених у слотове (<slot>).

<my-component>
  <!-- Овај елемент ће бити "послат" у слот унутар Shadow DOM-а -->
  <span>Садржај слота</span>
</my-component>

// Унутар Shadow DOM компонента my-component
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Стил за елемент постављен у слот са именом "my-slot" */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Главни садржај компонента</div>
  <slot></slot> <!-- Овде ће бити приказан садржај слота -->
`;

Shadow DOM је део спецификације Web Components.