Що таке Shadow DOM?

Повне пояснення

Що це і навіщо Shadow DOM (інкапсуляція) забезпечує ізоляцію стилів і структури компоненту, що запобігає колізіям CSS та JavaScript між різними частинами сторінки. Це ключовий механізм Web Components.

Ключові принципи

• Ізоляція: стилі, скрипти й DOM елементи в Shadow Root не впливають на глобальний документ.
• Mode: open (доступний через JavaScript) або closed (невидимий).
• Slot: механізм для вставки контенту з зовнішнього DOM.

Як це працює

1. Створюється елемент‑хост.
2. Викликаємо attachShadow({mode}) → отримуємо ShadowRoot.
3. Додаємо внутрішні елементи, стилі й скрипти до ShadowRoot.
4. При потребі вставляємо контент у <slot>.

Практика і реалізація

class MyCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode:'open'});
    shadow.innerHTML = `<style>p{color:red;}</style><slot></slot>`;
  }
}
customElements.define('my-card', MyCard);

<my-card>Текст у слоті</my-card>

Тестування

• Unit: перевірити, що shadowRoot існує і містить очікувані елементи.
• Integration: використати Jest + @testing-library/dom для рендеру компоненту.

Безпека Shadow DOM не обмежує доступ до скриптів, тому слід уникати небезпечного коду всередині компоненту.

Особливості в контексті JS/TS Core

• Підтримується у всіх сучасних браузерах.
• Важливий для створення Web Components, що інтегруються з React/Angular через @webcomponents/custom-elements.

Оптимізація

• Ізоляція зменшує кількість перерисовок, оскільки стилі не застосовуються глобально.
• Використання adoptedStyleSheets (CSS OM) підвищує продуктивність.

Часті помилки

1. Забудьте про mode: 'open' → неможливо отримати доступ до ShadowRoot.
2. Неправильне використання <slot> → контент не вставляється.
3. Перевантаження ShadowRoot великою кількістю стилів → зниження продуктивності.
4. Спроба змінити внутрішні елементи через глобальний CSS → не працює.
5. Вставка скриптів у ShadowRoot без defer → може блокувати рендер.
6. Використання closed mode, коли потрібний доступ з тестів.
7. Неправильне визначення customElements.define → помилка при повторному реєстрації.
8. Забудьте про кросбраузерну підтримку – IE не підтримує Shadow DOM.

Cheatsheet

• attachShadow({mode}) – створює ShadowRoot.
• <slot> – вставка контенту.
• shadowRoot.querySelector – доступ до внутрішніх елементів.

Follow‑up питання

• Як працює adoptedStyleSheets?
• Чи можна використовувати Shadow DOM у React‑компонентах?