Progressive Web Components

Elena is a lightweight library designed to help developers build Progressive Web Components, a class of native custom elements structured to render HTML and CSS immediately, with JavaScript layered on to add interactivity and advanced templating. The library emphasizes a standards-based approach, relying on native web platform features and avoiding unnecessary dependence on client-side JavaScript. Elena is particularly aimed at teams creating component libraries and design systems that require components to work across multiple frameworks and to address common challenges such as layout shifts, flash of unstyled content, accessibility issues, and server-side rendering limitations.

The core philosophy behind Progressive Web Components is to separate the rendering of base HTML and CSS from JavaScript enhancements. Elena supports three main types of components: Composite (HTML and CSS in the Light DOM), Primitive (self-contained with their own HTML and CSS in the Light DOM), and Declarative (utilizing Declarative Shadow DOM for hybrid approaches). The library does not enforce these patterns but provides flexibility for developers to choose the most appropriate structure for their use case. Elena supports the full standard custom element lifecycle, including features like open or closed Shadow DOM, templates, slots, and Declarative Shadow DOM.

6kB minified and compressed), progressive enhancement with initial HTML and CSS rendering before JavaScript hydration, default accessibility through semantic HTML, and efficient, batched re-renders triggered by property and state changes. The library offers scoped styles for clean CSS encapsulation and is designed to be SSR-friendly, requiring no special server logic for components that do not use a render() method, and providing partial support and hydration for those that do. Elena is delivered as a set of npm packages under the @elenajs scope, with a core runtime package and additional supporting packages for development. It has zero runtime dependencies and is compatible with every major framework or can be used standalone.

Elena does not impose lock-in, allowing developers to build web components that are portable and standards-compliant, while simplifying the complexities of cross-framework compatibility and server-side rendering.