Какво е Shadow DOM?

Shadow DOM е уеб стандарт, който позволява инкапсулиране на DOM и CSS вътре в компонент. Той създава отделено, изолирано дърво DOM, наречено "shadow tree" (сянка дърво), което се прикачва към елемент в основния документ, наречен "shadow root" (сянка корен).

Предимства на Shadow DOM:

• Изолация на CSS: Стиловете, дефинирани вътре в Shadow DOM, не "изтичат" навън, като не влияят на основния документ, и по подразбиране стиловете от основния документ не влияят на Shadow DOM.
• Изолация на DOM: Структурата на Shadow DOM е скрита от основния документ и не е достъпна чрез стандартни методи за избор (например, querySelector).
• Изолация на JavaScript: Скриптовете, изпълнявани в основния документ, не могат лесно да получат достъп до елементите вътре в Shadow DOM.
• Повторна употреба: Компонентите, създадени с Shadow DOM, могат лесно да бъдат използвани в други части на приложението или дори на други уебсайтове.

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

// Получаваме елемента, към който искаме да прикачим Shadow DOM
const hostElement = document.getElementById('my-component');

// Създаваме Shadow Root
// 'open' прави Shadow DOM достъпен отвън чрез hostElement.shadowRoot
// 'closed' скрива Shadow DOM
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Добавяме елементи вътре в Shadow DOM
shadowRoot.innerHTML = `
  <style>
    /* Стилове, специфични за този компонент */
    h2 {
      color: blue;
    }
  </style>
  <h2>Заглавие вътре в компонента</h2>
  <p>Параграф вътре в компонента.</p>
`;

Характеристики:

• Slots: Позволяват вмъкване на външно съдържание на определени места вътре в Shadow DOM.
• Shadow Parts: Позволяват стилизиране на определени елементи вътре в Shadow DOM отвън.

Shadow DOM е ключов компонент за създаване на уеб компоненти (Web Components), предоставяйки силна инкапсулация, необходима за създаване на повторно използваеми и самодостатъчни UI елементи.