Introducing Elena: A New Approach to Progressive Web Components
After nearly a decade of building design systems, I found persistent issues with standard Web Components like layout shifts and poor server-side rendering. To solve this, I created Elena, a lightweight library for Progressive Web Components that renders HTML and CSS first before adding JavaScript. This approach ensures true cross-framework portability, better accessibility, and seamless integration with modern tools while relying entirely on native web standards.
The problem isn't necessarily the model itself, it's how we've been building them.
- hyperhello
One fun thing I did once is use the custom elements API to make a custom tag <element-template>. When the page sees <element-template tag=what-name></element-template>, it looks inside, finds any <template></template> <script></script> and <style></style> tags, and builds a new custom element with that tag name and all the powers. Cool but not incredibly simple.
Another amazing trick is to put a mutation observer on the page to detect <template> tags as they're created. (template tags parse the HTML within but don't actually create it on the page). Once the observer finds a template tag it can upgrade them to have new powers, like replacing the contents of other tags. There are ways to tame web components and make them very easy to use.
- zelphirkalt
The HTML + CSS first approach and JS only for enrichment sounds great, and like what should be done anyway. I wonder though, how it will play out in reality. Will web developers using this library make the effort to keep essential functionality JS free, if possible, and provide additional views using whatever web framework they use, or will they implement essential functionality as "JS enrichment", requiring JS for things that do not actually need to be done in JS at all?
- strix_varius
Hm, the page is unreadable on brave on dark mode.