Shadow DOM

• Mode: open (shadowRoot accessible) / closed (hidden)
• Style encapsulation: CSS внутри не leaks out, snaapshot outside не leaks in
• : placeholder для light DOM content projection
• ::part() и :host: CSS API для styling shadow от outside
• Browser support: 100% modern browsers (2019+)

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

• Web Streams
• View Transitions

Shadow DOM — это технология, позволяющая создавать инкапсулированные компоненты в веб-приложениях, что обеспечивает защиту от конфликтов стилей и скриптов. Она является частью спецификации Web Components и позволяет разработчикам создавать повторно используемые элементы с собственным стилем и поведением.

Использование Shadow DOM предоставляет ряд преимуществ:

• Инкапсуляция стилей: Стили, определенные внутри Shadow DOM, не влияют на внешние элементы и наоборот.
• Изолированное поведение: События и скрипты, работающие в пределах Shadow DOM, не конфликтуют с аналогичными элементами на странице.
• Упрощение разработки: Позволяет создавать независимые компоненты, что облегчает поддержку и масштабирование проектов.

Эти преимущества особенно важны при разработке крупных приложений, где множество разработчиков работают над разными частями кода.

Для создания компонента с использованием Shadow DOM нам потребуется JavaScript. Рассмотрим пример простого веб-компонента, который отображает кнопку с собственным стилем:

class MyButton extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const button = document.createElement('button');
    button.textContent = 'Нажми меня';
    button.style.backgroundColor = 'blue';
    button.style.color = 'white';
    shadow.appendChild(button);
  }
}
customElements.define('my-button', MyButton);

В этом примере мы создаем класс MyButton, который расширяет HTMLElement. В конструкторе мы создаем теневое дерево с помощью метода attachShadow. Затем создаем кнопку и добавляем ее в теневое дерево. Такой подход обеспечивает полную инкапсуляцию стилей и поведения кнопки.

Чтобы использовать наш новый компонент, достаточно добавить его в HTML-код:

<my-button></my-button>

Теперь, даже если на странице есть другие кнопки, стили и поведение нашего компонента останутся изолированными.