Веб-компоненты

Кнопка «Копировать», карточка товара, виджет рейтинга — такие элементы повторяются из проекта в проект. Обычно их переносят вместе с фреймворком: компонент React работает только в React-приложении. Веб-компоненты решают задачу на уровне самого браузера: вы объявляете тег вроде <copy-button>, и он работает в обычном HTML, в теме WordPress, в шаблоне Битрикса и внутри любого фреймворка.

Три технологии в основе

• Пользовательские элементы (Custom Elements) — регистрация нового тега и его поведения через класс JavaScript. Имя обязательно содержит дефис, чтобы не пересечься со стандартными тегами.
• Shadow DOM — скрытое поддерево элемента: стили внутри не вытекают наружу, а стили страницы не ломают компонент.
• HTML-шаблоны — теги <template> и <slot> для заготовок разметки и мест, куда подставляется содержимое из страницы.

Пример пользовательского элемента

class CopyButton extends HTMLElement {
  constructor() {
    super();
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<style>button{cursor:pointer}</style><button>Копировать</button>';
    root.querySelector('button').addEventListener('click', () => {
      navigator.clipboard.writeText(this.getAttribute('text'));
    });
  }
}
customElements.define('copy-button', CopyButton);

После этого на странице достаточно написать <copy-button text="PROMO2026"></copy-button>. Методы жизненного цикла connectedCallback и attributeChangedCallback позволяют реагировать на вставку элемента в документ и на изменение атрибутов.

Когда выбирать веб-компоненты

Они хороши для виджетов, которые нужно встраивать в разные сайты и движки, и для дизайн-систем, которыми пользуются команды на разных фреймворках. Изоляция стилей особенно полезна, когда виджет попадает на чужую страницу с непредсказуемым CSS. Ограничения тоже есть: стилизовать компонент снаружи можно только через CSS-переменные и специальные части (::part), содержимое Shadow DOM без серверного рендеринга изначально отсутствует в HTML-коде страницы, а для сложных интерфейсов с общим состоянием фреймворки по-прежнему удобнее. Веб-компоненты не заменяют компонентный подход в целом, а дают ему стандартную браузерную основу.