Реалізація кроссфреймворкових Web Components
Ми часто стикаємося з ситуацією: команда написала універсальну бібліотеку Web Components, але при інтеграції в React події не ловляться, в Angular — помилка схеми, а в SSR — компоненти падають. Знайомо? Ми вирішуємо ці проблеми, гарантуючи сумісність і надаючи готові обгортки для кожного фреймворка. Оцінимо ваш проєкт за один день. Наші клієнти економлять до 40% часу на інтеграції завдяки готовим рішенням.
Проблеми, які ми вирішуємо
React: передача об'єктів та події
React до версії 19 не передає об'єкти й масиви через атрибути — все перетворюється на рядок [object Object]. Кастомні DOM-події не підхоплюються автоматично. Наше рішення — ref + useEffect для встановлення властивостей і підписки на події. У React 19 ситуація покращена: об'єкти передаються безпосередньо, а кастомні події можна ловити через on* пропси. Але навіть у 19 версії потрібна перевірка сумісності.
Angular: схема та двостороннє зв'язування
Angular вимагає додавання CUSTOM_ELEMENTS_SCHEMA до модуля або standalone-компонента. Для двостороннього зв'язування (ngModel) потрібна директива-обгортка, що реалізує ControlValueAccessor. Це додає 1–2 дні розробки на кожен компонент.
SSR: сервер не знає customElements
На сервері немає глобальних об'єктів customElements, HTMLElement, window. Компоненти, які звертаються до них у конструкторі, ламають SSR. Ми використовуємо ліниве завантаження (dynamic import з { ssr: false }) або Declarative Shadow DOM для рендерингу на сервері. Наприклад, у Next.js компонент можна імпортувати через next/dynamic з опцією ssr: false, а в Nuxt — через client-only.
Як ми забезпечуємо сумісність?
Ми використовуємо перевірені патерни та інструменти для кожного фреймворка. Приклад — інтеграція Lit-компонента в React через @lit/react:
import { createComponent } from '@lit/react'; import React from 'react'; import { UiButton } from '@company/ui-core'; export const Button = createComponent({ tagName: 'ui-button', elementClass: UiButton, react: React, events: { onUiClick: 'ui-click', onUiFocus: 'ui-focus', onUiBlur: 'ui-blur', }, }); function App() { return <Button variant="primary" onUiClick={(e) => console.log(e.detail)}>Click</Button>; } Такий підхід дає повну типізацію та правильну обробку подій. Для інших фреймворків використовуємо аналогічні обгортки.
Порівняння фреймворків
| Фреймворк | Передача об'єктів | Події | SSR | Час інтеграції (дні) |
|---|---|---|---|---|
| React | Потрібен ref | Ручна підписка | Dynamic import | 3–5 |
| Vue | Нативно через .prop | Автоматично | Налаштування компілятора | 1–2 |
| Angular | Директива-обгортка | Директива | Динамічний імпорт | 4–6 |
| Svelte | Нативно | on:событие | Dynamic import | 1–2 |
Чому SSR — головна проблема Web Components?
SSR ламається, тому що на сервері немає браузерних API. Ми вирішуємо це двома способами: використовуємо Declarative Shadow DOM — специфікацію, що дозволяє серверу відрендерити Shadow DOM у рядках HTML, або динамічний імпорт, який завантажує компонент тільки на клієнті. Вибір залежить від ваших вимог до SEO та часу завантаження.
Як Vue спрощує інтеграцію?
Vue 3 — найбільш дружній фреймворк: він розпізнає кастомні елементи за наявністю дефіса в тегу. Потрібно лише налаштувати vite.config.js, щоб Vue не намагався парсити ці теги як свої компоненти. Передача об'єктів працює нативно через модифікатор .prop. Це робить інтеграцію в 2 рази швидшою, ніж у React.
Що таке Declarative Shadow DOM?
Declarative Shadow DOM (DSD) — це механізм рендерингу Shadow DOM на сервері. Компонент віддається у вигляді HTML з <template shadowrootmode="open">. Браузер при завантаженні сторінки перетворює його на справжній Shadow DOM. Це вирішує проблему SSR для Web Components, але вимагає підтримки в браузері та правильної реалізації. Ми використовуємо DSD для компонентів, критичних для SEO.
Процес роботи
- Аналіз — вивчаємо вашу бібліотеку Web Components, виявляємо проблемні місця.
- Проектування — створюємо обгортки для кожного фреймворка з урахуванням типізації.
- Реалізація — пишемо код, використовуючи
@lit/react, Angular directives, Vue plugins. - Тестування — перевіряємо у всіх цільових фреймворках та в SSR.
- Деплой — передаємо документацію та приклади використання.
Що входить у роботу
- Обгортки для React, Vue, Angular, Svelte (за запитом).
- Підтримка SSR за допомогою Dynamic import або Declarative Shadow DOM.
- Документація з прикладами та API.
- Навчання команди (1–2 години).
- Технічна підтримка протягом місяця.
Порада: налаштування подій
Усі кастомні події повинні мати `composed: true` та `bubbles: true`, щоб коректно спливати через Shadow DOM. Інакше фреймворки не зможуть їх перехопити.Чому варто довірити інтеграцію нам?
Наші інженери мають 10+ років досвіду в розробці UI-бібліотек та кроссфреймворкової інтеграції. Ми реалізували 50+ проєктів з Web Components для клієнтів з Європи та США. Гарантуємо сумісність під ключ за 3–5 днів на один фреймворк. Зв'яжіться з нами для консультації — оцінимо складність вашого проєкту. Замовте інтеграцію та отримайте готові обгортки під ключ.