--- title: Progressive Web Components | daily.dev description: Elena is a new open-source JavaScript library (2.6kB) for building Progressive Web Components — native Custom Elements that render HTML and CSS first, then... canonical: https://daily.dev/posts/progressive-web-components-t3lc8pytx twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Progressive Web Components | daily.dev og:description: Elena is a new open-source JavaScript library (2.6kB) for building Progressive Web Components — native Custom Elements that render HTML and CSS first, then... og:url: https://daily.dev/posts/progressive-web-components-t3lc8pytx og:image: https://api.daily.dev/og/posts/t3LC8PyTX.png og:image:alt: Progressive Web Components og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Progressive Web Components **[Hacker News](https://daily.dev/sources/hn)** · 5 min read · 4 upvotes · 2 comments ## Summary Elena is a new open-source JavaScript library (2.6kB) for building Progressive Web Components — native Custom Elements that render HTML and CSS first, then progressively enhance with JavaScript. The library addresses common web component pain points like layout shifts, flash of unstyled content, poor SSR support, and accessibility issues. It introduces a three-tier component taxonomy: Composite, Primitive, and Declarative components. Elena is SSR-friendly by default, zero-dependency, framework-agnostic, and ships with 13 npm packages including a CLI, bundler, SSR tools, and an MCP server. Version v1.0.0-rc.7 is now available. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community take How the wider developer community reacted, aggregated from 5 discussions and 71 comments across hackernews, lobsters (as of 2026-08-01). **TL;DR:** The community is broadly skeptical of web components as a general-purpose solution, viewing them as riddled with design issues and poor framework interoperability, though some see value in them as framework-agnostic leaf components or for library authors; Elena itself gets modest interest but little deep evaluation. **Sentiment:** 20% positive · 45% mixed · 35% skeptical **The case for** - Web components allow UI elements to be distributed and consumed across any framework without a special runtime. - Lit and similar thin wrappers make web components more ergonomic while keeping them lightweight. - Custom registries in web components enable gradual version migration that JS frameworks lack. - Progressive enhancement layering (HTML/CSS base + JS enrichment) is a genuinely useful design philosophy. **The pushback** - Shadow DOM breaks a wide range of browser functionality and forces dozens of additional standards to patch the holes it introduces. - Web components cause request cascade issues because browser-level imports are fetched recursively before any JS runs. - Framework interoperability is a minefield: React's VDOM re-renders can reset web component state, infinite re-render glitches occur with setState, and custom events behave unexpectedly. - Custom elements must be registered globally and cannot be unregistered, creating long-term maintainability problems. - Basic functionality like acting as a custom form submit button remains broken after years of open issues. - Most build-tool ecosystems (CSS modules, CSS-in-JS) already solve the problems shadow DOM was meant to address, with less runtime overhead. **By community** - hackernews (skeptical): Commenters largely agree web components are better thought of as 'custom elements' for library authors rather than a React/framework replacement, and catalog deep interoperability and design problems that make broad adoption unappealing. - lobsters (mixed): Discussion was dominated by a side-debate over whether the author was hiding LLM usage, with only a few comments engaging the library's actual 'progressive web component' concept and finding its no-JS claim somewhat misleading. **Hottest debate:** Whether web components' shadow DOM and import model are fundamentally broken design choices or merely implementation challenges that can be worked around. **Open questions** - How does Elena concretely differ from Lit, which is more mature and already avoids JSX? - Can a list of data-driven components (e.g., a tag list) truly be rendered without JavaScript using this progressive approach, or is the 'no-JS base layer' claim misleading? - Will modern bundlers' global-stylesheet approach always outperform web components' per-component local stylesheets on load performance? **Highlights** > Support for anything web components-related is a death by a thousand cuts both for the browsers and for the framework authors. For the browsers: Shadow dom breaks almost literally everything. It's a parallel world that exists on its own and that needs dozens of additional web standards to patch holes introduced by it. And delays dozens of useful web standards that now have to be aware of it. On top of that nothing in web components is ever created thinking even one step ahead, and break multiple pieces of basic functionality. It's a collection of barely fitting patches. E.g. at first they couldn't send data in forms. Enter FormData. Oops, still cannot be a custom form submit button. Here's a 7-year old still unresolved issue: https://github.com/WICG/webcomponents/issues/814 For frameworks: Framework authors have to patch all thise holes on their own. Because unlike web components they actually do care about standards and browser functionality. If styles don't work, forms din't work, code doesn't work etc. because of web components, it's the framework that will be blamed. It doesn't help that there's an insane amount of work involved in figuring out all the ways they are broken. See for example: https://xcancel.com/Rich_Harris/status/1841467510194843982#m > — [troupo on hackernews · 1 comments](https://news.ycombinator.com/item?id=49131475) > For web components to be consumable across frameworks, you still have to write it to be compatible for different frameworks. Our platform team thought they could get away with just focusing on native js, but when it came time to use in React, many behavioral approaches were incompatible. Dealing with re-renders would clear the state of the WC, losing all dropdown items. The toggle button had an infinite re-render glitch when combined with setState. We lost the ability to require event handlers, and prod had a few P0’s over unhandled click events. The ideal was to be close to the browser, but it’s mostly blown up in our face. The approach in this post would’ve been helpful, and it’s almost worth the cross-framework compatibility, but I just wish the entire web components standard didn’t come with an unbelievable amount of these and other problems > — [compacct27 on hackernews · 1 comments](https://news.ycombinator.com/item?id=49133776) > I’d argue that the target audience of Web Components in general should be library developers. Web Components are great for distributing UI elements that work with every framework. Web Components are terrible for just building apps. Use a framework! From this perspective, Elena seems like a welcome approach. If Web Components are for library authors, and they are, then it stands to reason that Web Component frameworks optimize for that as well. > — [skrebbel on hackernews](https://news.ycombinator.com/item?id=49132366) > A CLAUDE.md in a gitignore doesn’t entitle you to be an accusatory asshole (here or in your git issue). They ship an mcp package and the terminal logo is an homage to Claude code so I see no evidence of trying to hide llm usage. Lobsters is really becoming hard to engage with because of this vocal minority (not people who dislike LLM usage but the minority who feels like they’re on god’s crusade to smite all LLM users) > — [altano on lobsters · 8 points, 1 comments](https://lobste.rs/s/tkcood/progressive_web_components#c_quw6xi) > > Elena doesn’t force JavaScript for everything. You can load HTML and CSS first, then use JavaScript to progressively add interactivity. Can anyone explain this more? If you have some data that represents a list of something, say a list of tags, and you have a Tag web component, how would you render the list without JavaScript? > — [altano on lobsters · 4 points, 1 comments](https://lobste.rs/s/tkcood/progressive_web_components#c_q5wz9q) **Source threads** - [hackernews](https://news.ycombinator.com/item?id=49121196) · 66 points · 54 comments - [hackernews](https://news.ycombinator.com/item?id=48005749) · 4 points · 0 comments - [hackernews](https://news.ycombinator.com/item?id=48033568) · 3 points · 0 comments - [hackernews](https://news.ycombinator.com/item?id=48066688) · 1 points · 0 comments - [lobsters](https://lobste.rs/s/tkcood/progressive_web_components) · 14 points · 17 comments ## Community discussion Top comments from developers on daily.dev. **@trevorsuna** · 1 upvotes > HTML and CSS first is the right default for components that should survive slow JavaScript or no JavaScript. The interesting measure will be whether the primitive/composite split keeps accessibility and SSR behavior predictable as teams build larger systems. **@rizzdev** · 0 upvotes > 2.6kB core until you count the other 12 packages ## Similar posts on daily.dev - [Elena, a library for building Progressive Web Components](https://daily.dev/posts/elena-a-library-for-building-progressive-web-components-pdveiscfo) · Hacker News · 56 upvotes · 1 comments - [Chris’ Corner: Web Components](https://daily.dev/posts/chris-corner-web-components-fnnodm0nx) · CodePen · 2 upvotes · 0 comments - [Web Components Are the Comeback Nobody Saw Coming](https://daily.dev/posts/web-components-are-the-comeback-nobody-saw-coming-5oxazwtym) · The New Stack · 109 upvotes · 13 comments - [CSS Web Components for marketing sites](https://daily.dev/posts/css-web-components-for-marketing-sites-zxkljevts) · Hacker News · 81 upvotes · 4 comments - [Under the hood of MDN's new frontend](https://daily.dev/posts/under-the-hood-of-mdn-s-new-frontend-teqgsjvat) · MDN Blog · 104 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#design-systems](https://daily.dev/tags/design-systems), [#web-components](https://daily.dev/tags/web-components) [View this post on daily.dev](https://daily.dev/posts/progressive-web-components-t3lc8pytx) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Progressive Web Components","url":"https://daily.dev/posts/progressive-web-components-t3lc8pytx","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/progressive-web-components-t3lc8pytx"},"datePublished":"2026-07-31T23:13:45.698Z","dateModified":"2026-08-01T15:42:31.681Z","description":"Elena is a new open-source JavaScript library (2.6kB) for building Progressive Web Components — native Custom Elements that render HTML and CSS first, then...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7fe8ad5ba679ba93a1dc5fc54d2ca7b2?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/7fe8ad5ba679ba93a1dc5fc54d2ca7b2?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Hacker News","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Hacker News","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/hn","url":"https://daily.dev/sources/hn"},"commentCount":2,"discussionUrl":"https://daily.dev/posts/progressive-web-components-t3lc8pytx","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":2}],"keywords":"webdev,design-systems,web-components","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Hacker News","item":"https://daily.dev/sources/hn"},{"@type":"ListItem","position":3,"name":"Progressive Web Components"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/progressive-web-components-t3lc8pytx","comment":[{"@type":"Comment","text":"HTML and CSS first is the right default for components that should survive slow JavaScript or no JavaScript. The interesting measure will be whether the primitive/composite split keeps accessibility and SSR behavior predictable as teams build larger systems.","datePublished":"2026-08-01T06:23:08.164Z","url":"https://daily.dev/posts/t3LC8PyTX#c-yItahKhjH","author":{"@type":"Person","name":"Trevor Suna","url":"https://daily.dev/trevorsuna","image":"https://media.daily.dev/image/upload/s--dZ7gXxpp--/f_auto/v1784081551/avatars/avatar_EMoP47rpuw8DNjhp6R1b6?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"2.6kB core until you count the other 12 packages","datePublished":"2026-08-02T23:53:43.146Z","url":"https://daily.dev/posts/t3LC8PyTX#c-9cO0t4Axv","author":{"@type":"Person","name":"Andrew","url":"https://daily.dev/rizzdev","image":"https://media.daily.dev/image/upload/s--35vRfXAA--/f_auto/v1785413727/avatars/avatar_fQ7ttCKtPuu6tDvcgQXv5?_a=BAMAMicg0"}}]} ```