Блог · Вёрстка
7 ноября 2026
Веб-компоненты
без фреймворков
Custom Elements и Shadow DOM — как собирать переиспользуемые блоки на чистом JS, без React и Vue.
Custom Elements и Shadow DOM — как собирать переиспользуемые блоки на чистом JS, без React и Vue.
Переиспользование без сборщика и виртуального DOM
Если на нескольких страницах повторяется одинаковый блок — карточка товара, баннер с уведомлением, аккордеон FAQ — обычно его копируют в HTML каждой страницы. Веб-компонент позволяет объявить его один раз как собственный тег и переиспользовать где угодно, просто вставив <my-widget>.
В отличие от React или Vue, для этого не нужен сборщик, транспилятор или виртуальный DOM — только нативный JavaScript, который браузер понимает сам.
Три технологии под одним названием
| Технология | Что делает |
|---|---|
| Custom Elements | Позволяет зарегистрировать собственный HTML-тег с JS-классом |
| Shadow DOM | Изолирует внутреннюю разметку и стили компонента от остальной страницы |
| HTML Templates | Тег <template> — разметка, которая не рендерится сразу, а клонируется по требованию |
Счётчик на 15 строк без единой зависимости
class LikeButton extends HTMLElement {
connectedCallback() {
this.innerHTML = `<button>♥ <span>0</span></button>`;
let count = 0;
this.querySelector('button').onclick = () => {
count++;
this.querySelector('span').textContent = count;
};
}
}
customElements.define('like-button', LikeButton);
<!-- в HTML: -->
<like-button></like-button>Браузер сам вызовет connectedCallback, как только тег <like-button> появится на странице — не нужен ручной поиск элементов через querySelectorAll.
Честная оценка, а не religion
Для сложного приложения с многоуровневым состоянием, роутингом и десятками связанных компонентов — React или Vue дадут более зрелую экосистему инструментов и меньше кода на рутинные задачи.
Веб-компоненты хорошо закрывают точечные задачи: 2-5 переиспользуемых виджетов на в остальном простом статическом сайте, без необходимости тащить целый фреймворк ради этого.
Короткие ответы на главное
Для больших приложений с сложным состоянием — не полностью. Но для переиспользуемых виджетов на статическом сайте (карточка, аккордеон, модалка) веб-компоненты справляются без лишней зависимости.
Изолированное DOM-дерево внутри компонента — стили и разметка внутри него не пересекаются со стилями остальной страницы, и наоборот.
Да, все современные браузеры поддерживают Custom Elements и Shadow DOM нативно, без полифилов — эта технология уже не экспериментальная.
Соберём компоненты на чистом JS — без лишних зависимостей и веса фреймворка.