Progressive Web Components
The article introduces Progressive Web Components as a design philosophy that emphasizes building web components with a foundation of HTML and CSS, enhanced progressively with JavaScript. The author presents Elena, a 2.6kB open-source library designed to address common web component issues like layout shifts, accessibility, and server-side rendering limitations. Elena supports cross-framework compatibility and allows developers to build components that render quickly and accessibly without relying heavily on client-side JavaScript.
- ▪Progressive Web Components are built in two layers: a base layer of HTML and CSS that renders without JavaScript, and an enhancement layer that adds interactivity.
- ▪Elena is a 2.6kB library that supports server-side rendering, Declarative Shadow DOM, and cross-framework component development.
- ▪Components without a render() method are fully compatible with server-side rendering, while those with render() offer partial SSR support and full hydration on the client.
- ▪Elena supports the full custom element lifecycle and standard web component features like <template>, <slot>, and open or closed Shadow DOM.
- ▪The first release candidate of Elena, v1.0.0-rc.7, is now available with features tailored for product teams building component libraries.
Opening excerpt (first ~120 words) tap to expand
Progressive Web ComponentsI’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.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at Ariel Salminen.
Discussion
0 commentsMore from Ariel Salminen
