Ариэль Салминен почти десять лет работает с web components и строит на них enterprise-библиотеки. На бумаге всё отлично, но на практике постоянно всплывают одни и те же боли: скачки вёрстки, вспышка неоформленного контента, слабая поддержка серверного рендеринга, слишком сильная привязка к клиентскому JavaScript, конфликты с React Server Components, проблемы доступности. Несмотря на это, он считает web components идеальной основой для design system — никакой другой подход не даёт настоящей кросс-фреймворковой переносимости на том, что уже встроено в веб-платформу. Беда не в модели, а в том, как мы их создаём.
Так появилась Elena — библиотека, которую Салминен открывает сегодня. Elena стартует с HTML и CSS и остаётся в рамках веб-стандартов. Ключевая идея — Progressive Web Component, нативный Custom Element из двух слоёв. Базовый слой — HTML и CSS, который отрисовывается мгновенно, без JavaScript. Слой улучшения — JavaScript, добавляющий реактивность, обработку событий и продвинутую шаблонизацию. Автор выделяет три типа таких компонентов: Composite Components, оборачивающие и улучшающие уже написанный HTML (весь HTML и CSS живёт в Light DOM, их ещё называют HTML Web Components); Primitive Components, самодостаточные и рендерящие собственный HTML, с CSS тоже в Light DOM; и Declarative Components — гибрид с Declarative Shadow DOM. Впрочем, Elena не заставляет следовать этой таксономии, всё это просто веб-компоненты, а Progressive Web Components — скорее философия, помогающая выбрать подходящий подход.
Сама Elena — крошечная библиотека (2.6kB), которая не требует JavaScript для всего. Сначала загружаются HTML и CSS, а потом уже подключается скрипт. Она рассчитана на команды, создающие библиотеки компонентов и design systems. Если нужны компоненты, работающие в любых фреймворках, отображающие контент до загрузки JS и обходящие типичные проблемы — доступность, ограничения серверного рендеринга, сдвиги макета, — Elena заточена именно под это. Она берёт на себя всю кросс-фреймворковую сложность: синхронизацию props и атрибутов, делегирование событий, совместимость.
Серверный рендеринг решается просто: поскольку Progressive Web Components — в первую очередь HTML и CSS, компоненты без метода render() полностью SSR-совместимы из коробки. Компоненты с render() дают частичную поддержку и гидрацию на клиенте, а для интерактивности понадобится опциональный инструмент @elenajs/ssr. При необходимости Elena поддерживает и Declarative Shadow DOM для более жёсткой изоляции при серверном рендеринге.
Сегодня выходит v1.0.0-rc.7 — седьмой релиз-кандидат. В активе: реактивные обновления свойств и состояния с эффективной пакетной перерисовкой, чистая CSS-инкапсуляция без костылей, полное отсутствие runtime-зависимостей и привязка к любому фреймворку или вообще отказ от него. Всё разбито на 13 npm-пакетов в пространстве имён @elenajs. Сам Ариэль Салминен — архитектор дизайн-систем и готов помогать командам по всему миру.