Elena: A 2.6kB Library for Web Components That Render Before JavaScript Loads

A developer with nearly a decade of experience building enterprise design systems has open-sourced Elena, a 2.6kB library aimed at fixing the chronic weaknesses of web components — layout shifts, flash of unstyled content, weak server-side rendering, and heavy reliance on client-side JavaScript. The core argument is that web components remain the only genuinely cross-framework foundation built on native browser standards, and that their problems stem from how they’re typically built rather than the model itself.

Elena’s central idea is the ‘Progressive Web Component’: a custom element split into two layers, a base of plain HTML and CSS that renders immediately without JavaScript, and an optional enhancement layer that adds reactivity, event handling, and templating once JS loads. The author outlines three flavors — composite components that enhance their own inner HTML in the Light DOM, self-contained primitive components, and declarative components using Declarative Shadow DOM. Because these components are mostly HTML and CSS, server-side rendering needs no special server logic; components without a render() method are SSR-compatible by default, while those with one render an initial state and hydrate on the client.

Shipping as a seventh release candidate (v1.0.0-rc.7), Elena spans 13 npm packages under the @elenajs scope, including a core runtime, bundler, CLI scaffolder, SSR tooling, and even an MCP server. It targets teams building component libraries that must work across React, other frameworks, or none at all, with zero runtime dependencies and no framework lock-in. The pitch is that Elena absorbs the tedious plumbing — prop and attribute syncing, event delegation, framework compatibility — so teams can focus on the components themselves rather than the interop glue.