Elena — это крошечная библиотека для сборки Progressive Web Components. В отличие от большинства библиотек для веб-компонентов, она не заставляет тащить JavaScript везде. Можно сначала загрузить HTML и CSS, а уже потом навешивать интерактивность через JavaScript.
Elena придумала @arielle после почти десяти лет работы над корпоративными дизайн-системами на web components. Везде всплывали одни и те же проблемы: доступность, серверный рендеринг, сдвиги макета, вспышка невидимого контента, React Server Components, слишком большая зависимость от клиентского JavaScript и совместимость со сторонними аналитическими инструментами. Elena решает эти проблемы, оставаясь в рамках родных веб-стандартов. Так и появились прогрессивные веб-компоненты.
Библиотека рассчитана на команды, которые делают библиотеки компонентов и дизайн-системы. Если нужно, чтобы компоненты работали в разных фреймворках — React, Next.js, Vue, Angular — и при этом рендерили HTML и CSS до загрузки JavaScript, Elena подходит. Она берёт на себя кросс-фреймворковую возню: синхронизацию пропсов и атрибутов, делегирование событий, совместимость. Разработчик просто пишет компоненты, а не возится с технической частью.
Главные фишки: очень лёгкая — 2.9kB minified & compressed; прогрессивно улучшается — сначала HTML и CSS, потом гидратация; доступна по умолчанию — семантический HTML без барьеров Shadow DOM; полностью на стандартах — нативные custom elements; реактивные обновления — изменения пропсов и состояния запускают эффективные батчевые ре-рендеры; изолированные стили — простая CSS-инкапсуляция без сложных обходных путей; дружит с SSR; ноль зависимостей и ноль привязки к фреймворку.
Браузерная поддержка строится на прогрессе: нужен любой браузер, умеющий рендерить Custom Elements. А саму библиотеку тестируют в последних двух версиях основных браузеров.