Progressive Web Components

I’ve worked with web components for nearly a decade and built various enterprise-scale design systems with them. While I love what they offer on paper, the same pain points keep coming back:

Layout shifts, flash of unstyled content, poor server-side rendering support, too much reliance on client side JavaScript, doesn't play well with frameworks like React Server Components, accessibility issues, and so on…

Despite all of this, I still think web components are a great foundation for a design system. No other approach gives you true cross-framework portability built on what the web platform already provides. The problem isn’t necessarily the model itself, it’s how we’ve been building them.

This is how I ended up creating Elena, a library that I’m open sourcing today. Elena starts from HTML and CSS, and stays grounded in web standards and what the web platform natively provides.

What is a Progressive Web Component? #

A Progressive Web Component is a native Custom Element designed in two layers: a base layer of HTML and CSS that renders immediately, without JavaScript, and an enhancement layer of JavaScript that adds reactivity, event handling, and more advanced templating. There are three types of Progressive Web Components:

Composite Components that wrap and enhance the HTML composed inside them. All of their HTML and CSS lives in the Light DOM. You could also call these HTML Web Components. Primitive Components that are self-contained and render their own HTML. All of their CSS lives in the Light DOM together with the base HTML required for rendering the initial state. Declarative Components that are a hybrid of these and utilize Declarative Shadow DOM.

Note: Elena doesn’t force this taxonomy. They’re all just web components, and you choose how to build yours. But since “Progressive Web Components” is a design philosophy rather than a library feature, understanding the distinction between these approaches helps when deciding what fits your use case.

So what is Elena, anyway? #

... continue reading