El desarrollador Ariel Salminen ha presentado Elena, una biblioteca de código abierto de apenas 2,6 kilobytes (KB) diseñada para crear Web Components progresivos, un enfoque que busca resolver las limitaciones históricas de los componentes web nativos sin renunciar a los estándares de la plataforma.
Salminen, quien lleva casi una década trabajando con web components y ha construido sistemas de diseño a escala empresarial, explica en su blog que, aunque valora las posibilidades teóricas de esta tecnología, siempre ha tropezado con los mismos problemas: cambios de diseño inesperados (layout shifts), flashes de contenido sin estilo (FOUC), soporte deficiente para renderizado del lado del servidor (SSR), excesiva dependencia de JavaScript en el cliente, problemas de compatibilidad con frameworks modernos como React Server Components y obstáculos de accesibilidad. "El problema no es necesariamente el modelo en sí, sino cómo los hemos estado construyendo", afirma.
Elena parte de una filosofía que su creador denomina Progressive Web Components: un diseño en dos capas donde la base es HTML y CSS nativo, capaz de renderizarse inmediatamente sin JavaScript, y una capa de mejora que añade reactividad, gestión de eventos y plantillas avanzadas. Según la documentación oficial, existen tres tipos de componentes bajo esta filosofía: los Composite Components, que envuelven y mejoran el HTML del Light DOM (también conocidos como HTML Web Components); los Primitive Components, autocontenidos, que renderizan su propio HTML y mantienen el CSS en el Light DOM; y los Declarative Components, un híbrido que utiliza Declarative Shadow DOM.
La biblioteca se distribuye en 13 paquetes npm bajo el alcance @elenajs, con seis paquetes principales orientados al desarrollo: @elenajs/core, @elenajs/bundler, @elenajs/cli, @elenajs/ssr, @elenajs/mcp y @elenajs/components. El peso mínimo de 2,6 KB minificado y comprimido, la ausencia total de dependencias en tiempo de ejecución y el soporte nativo para el ciclo de vida estándar de los custom elements —incluyendo Shadow DOM abierto o cerrado, plantillas, slots y Declarative Shadow DOM— figuran entre sus principales atractivos.
En cuanto al renderizado del lado del servidor, Elena adopta un enfoque pragmático: los componentes sin método render() son totalmente compatibles con SSR por defecto, mientras que aquellos que sí lo incluyen ofrecen soporte parcial, permitiendo renderizar el estado inicial sin JavaScript aunque requieran hidratación completa en el cliente. Para escenarios que demandan mayor aislamiento, la biblioteca soporta Declarative Shadow DOM.
El lanzamiento coincide con la publicación de la versión 1.0.0-rc.7, la séptima candidata a release, que incluye características orientadas a equipos de producto que crean bibliotecas de componentes: reactividad eficiente con actualizaciones por lotes, estilos encapsulados sin soluciones complejas, sincronización de propiedades y atributos, delegación de eventos y compatibilidad cross-framework. La promesa central es que los componentes funcionen con cualquier framework importante —o sin ningún framework— sin generar lock-in.
El sitio web oficial, elenajs.com, ofrece documentación detallada, un playground interactivo, ejemplos en vivo y una sección de preguntas frecuentes. El repositorio de código está disponible en GitHub bajo la cuenta del autor. Aunque ambas fuentes consultadas —el anuncio del creador y la documentación oficial— coinciden plenamente en la descripción técnica del proyecto, cabe señalar que la información proviene en su totalidad de los canales del propio desarrollador, por lo que la adopción y recepción real en la comunidad de desarrolladores aún está por medirse de forma independiente.
Con esta propuesta, Salminen busca llenar un vacío en el ecosistema de componentes web, donde la mayoría de bibliotecas obliga a cargar JavaScript desde el primer momento. Si la filosofía Progressive Web Components gana tracción, podría marcar un cambio en cómo los equipos de diseño construyen interfaces reutilizables, priorizando el contenido visible y funcional desde el primer byte y reservando la interactividad avanzada para cuando el navegador esté listo.