Какво е 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 {
      color: blue;
    }
  </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.