Разработка Web Components (Custom Elements) для сайта
Интеграция сложной UI-логики в проект без фреймворков — головная боль. Мы часто сталкиваемся с задачей создать переиспользуемый элемент, который одинаково хорошо работает и в WordPress, и в Laravel Blade, и в статическом HTML. Решение — Web Components — набор нативных браузерных API, которые позволяют разрабатывать собственные HTML-элементы с инкапсулированной логикой и стилями. Никаких зависимостей от React, Vue или jQuery. Компоненты живут в любом HTML-контексте.
Три составляющих: Custom Elements API (регистрация нового тега), Shadow DOM (инкапсуляция стилей), HTML Templates (шаблонизация). Используются независимо или вместе. Опыт нашей команды — 5+ лет разработки нативными средствами, более 10 проектов с Web Components. Гарантируем кросс-браузерную совместимость и производительность.
Основные проблемы при интеграции кастомных элементов
Первая проблема — конфликт стилей. Без Shadow DOM встроенные стили могут переопределяться глобальными CSS-правилами. Вторая — отсутствие реактивности: в отличие от фреймворков, нативные элементы не обновляются автоматически при изменении атрибутов. Третья — сложность тестирования: требуется среда с поддержкой Custom Elements. Мы решаем эти проблемы за счёт продуманной архитектуры и использования TypeScript.
Преимущества Web Components
Главное преимущество — независимость от фреймворков. Компонент, написанный один раз, работает в любом проекте: React, Vue, Angular, Svelte, чистый HTML. Это сокращает время разработки на 30% и упрощает поддержку. Кроме того, Web Components не требуют бандлера — их размер нулевой, в отличие от React-компонентов, которым нужно ~40 КБ библиотеки. Для старого проекта на jQuery это идеальный способ добавить современную функциональность без миграции всего стека.
Как создать кастомный элемент с нуля?
Процесс состоит из пяти шагов:
- Спроектировать API компонента — определить атрибуты, события и публичные методы.
- Написать класс, унаследованный от HTMLElement.
- Реализовать методы жизненного цикла (connectedCallback, attributeChangedCallback и т.д.).
- Зарегистрировать элемент через customElements.define().
- Протестировать в нескольких браузерах.
Вот типовой пример — компонент уведомления:
class ToastNotification extends HTMLElement { private shadow: ShadowRoot private messageEl: HTMLElement | null = null static get observedAttributes() { return ['type', 'message', 'duration'] } constructor() { super() this.shadow = this.attachShadow({ mode: 'open' }) } connectedCallback() { this.render() const duration = parseInt(this.getAttribute('duration') || '3000') if (duration > 0) { setTimeout(() => this.dismiss(), duration) } } disconnectedCallback() { this.messageEl?.removeEventListener('click', this.dismiss) } attributeChangedCallback(name: string, oldVal: string, newVal: string) { if (oldVal !== newVal && this.isConnected) { this.render() } } private render() { const type = this.getAttribute('type') || 'info' const message = this.getAttribute('message') || '' this.shadow.innerHTML = ` <style> :host { display: block; font-family: inherit; } .toast { padding: 12px 20px; border-radius: 8px; font-size: 14px; line-height: 1.4; cursor: pointer; animation: slide-in 0.3s ease; } .toast--info { background: #1a1a2e; color: #7eb8f7; border: 1px solid #2a4a7f; } .toast--success { background: #0d2e1a; color: #5cb85c; border: 1px solid #1a5e30; } .toast--error { background: #2e0d0d; color: #e74c3c; border: 1px solid #7f1a1a; } @keyframes slide-in { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } </style> <div class="toast toast--${type}" part="toast"> ${message} </div> ` this.messageEl = this.shadow.querySelector('.toast') this.messageEl?.addEventListener('click', this.dismiss) } private dismiss = () => { this.dispatchEvent(new CustomEvent('toast-dismiss', { bubbles: true, composed: true, })) this.remove() } show(message: string, type = 'info') { this.setAttribute('message', message) this.setAttribute('type', type) if (!this.isConnected) { document.body.appendChild(this) } } } customElements.define('toast-notification', ToastNotification) Использовать можно и через HTML, и через JS.
Жизненный цикл и TypeScript
Custom Elements предоставляют четыре метода жизненного цикла: constructor, connectedCallback, disconnectedCallback, attributeChangedCallback. Для корректной интеграции с TypeScript нужно объявить типы в HTMLElementTagNameMap:
declare global { interface HTMLElementTagNameMap { 'toast-notification': ToastNotification } } Типизация custom elements — важный шаг для создания бизнес-компонентов с автодополнением в IDE.
| Метод | Когда вызывается | Что делать |
|---|---|---|
| constructor | При создании элемента | Инициализация состояния, создание Shadow DOM |
| connectedCallback | При добавлении в DOM | Установка обработчиков, загрузка данных |
| disconnectedCallback | При удалении из DOM | Очистка обработчиков, таймеров |
| attributeChangedCallback | При изменении отслеживаемого атрибута | Обновление представления |
Когда Shadow DOM не нужен?
Shadow DOM добавляет изоляцию, но и сложность. Для простых элементов (например, счётчик или раскрывающийся список) достаточно Light DOM — стили наследуются от родителя, код проще. Пример аккордеона:
class AccordionItem extends HTMLElement { private header!: HTMLElement private content!: HTMLElement private isOpen = false connectedCallback() { this.innerHTML = ` <button class="accordion-header" aria-expanded="false"> <slot name="header"></slot> <svg class="accordion-icon" viewBox="0 0 24 24"> <path d="M6 9l6 6 6-6"/> </svg> </button> <div class="accordion-content" role="region" hidden> <slot name="content"></slot> </div> ` this.header = this.querySelector('.accordion-header')! this.content = this.querySelector('.accordion-content')! this.header.addEventListener('click', this.toggle) } private toggle = () => { this.isOpen = !this.isOpen this.header.setAttribute('aria-expanded', String(this.isOpen)) this.content.hidden = !this.isOpen } disconnectedCallback() { this.header?.removeEventListener('click', this.toggle) } } customElements.define('accordion-item', AccordionItem) Сравнение подходов
| Параметр | Shadow DOM | Light DOM |
|---|---|---|
| Инкапсуляция стилей | Полная | Нет |
| Сложность | Выше | Ниже |
| Производительность | Одинаково | Одинаково |
| Подходит для | Библиотек, сложных виджетов | Простых интерактивных элементов |
| Подход | Время на первый компонент | Повторное использование | Зависимости |
|---|---|---|---|
| Web Components | 4-8 часов | 100% в любом проекте | Нет |
| React компонент | 2-4 часа | только в React | 40KB |
| Vue компонент | 2-4 часа | только в Vue | 30KB |
Что входит в работу?
- Проектирование API компонента
- Реализация на TypeScript с полным жизненным циклом
- Написание деклараций типов
- Интеграция с существующим проектом
- Документация по использованию и кастомизации
- Поддержка в течение месяца после сдачи
Сроки и стоимость
Один простой компонент без Shadow DOM — от 4 до 8 часов. Комплексный компонент с анимациями, тестами и TypeScript — 1–3 дня. Библиотека из 5–10 компонентов — 1–2 недели. Стоимость рассчитывается индивидуально под ваш проект. Свяжитесь с нами для бесплатной консультации — мы оценим внедрение и предложим оптимальное решение.
На одном из проектов для крупного банка мы разработали библиотеку из 8 кастомных элементов (аккордеон, табы, уведомления, дропдаун, модальное окно, пагинатор, карточка товара, слайдер) для замены jQuery-плагинов. В результате размер страницы уменьшился на 200 КБ, а скорость загрузки выросла на 15%. При этом компоненты использовались и в WordPress, и в React-админке без изменений. Такая экономия ресурсов — прямое следствие отсутствия зависимостей и лёгкости нативных элементов.
Закажите разработку Web Components под ключ — получите надёжные, независимые элементы для любого сайта. Получите консультацию — мы ответим на все вопросы и поможем выбрать оптимальный подход.