--- title: Elena, a library for building Progressive Web Components description: Elena is a 2.9kB library for building Progressive Web Components that prioritizes HTML and CSS rendering before JavaScript hydration. Unlike most web component... canonical: https://daily.dev/posts/elena-a-library-for-building-progressive-web-components-pdveiscfo twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Elena, a library for building Progressive Web Components | daily.dev og:description: Elena is a 2.9kB library for building Progressive Web Components that prioritizes HTML and CSS rendering before JavaScript hydration. Unlike most web component... og:url: https://daily.dev/posts/elena-a-library-for-building-progressive-web-components-pdveiscfo og:image: https://api.daily.dev/og/posts/PDVEIScFO.png og:image:alt: Elena, a library for building 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. # Elena, a library for building Progressive Web Components **[Hacker News](https://daily.dev/sources/hn)** · 3 min read · 56 upvotes · 1 comments ## Summary Elena is a 2.9kB library for building Progressive Web Components that prioritizes HTML and CSS rendering before JavaScript hydration. Unlike most web component libraries, it avoids Shadow DOM, supports SSR out of the box, and works across major frameworks (React, Vue, Angular, Next.js) without lock-in. It was created to address recurring pain points in enterprise design systems: accessibility issues, layout shifts, flash of invisible content, and over-reliance on client-side JavaScript. Key features include zero dependencies, scoped styles via native CSS, reactive prop/state updates, and full web standards compliance. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### What is Elena and how does it differ from other web component libraries? Elena is a small JavaScript library (2.9kB minified and compressed) for building web components using a progressive enhancement model: HTML and CSS render first, and JavaScript hydrates interactivity afterward. Unlike many web component libraries, it doesn't require JavaScript for everything, avoids Shadow DOM barriers for accessibility, has zero runtime dependencies, and works across frameworks like React, Vue, Angular, and Next.js. _Teams choosing between web component approaches can compare options like Elena on daily.dev._ ### Can web components built with a library work inside React, Vue, and Angular apps at the same time? Yes, a library like Elena is designed to work with every major framework or no framework at all, handling cross-framework complexity such as prop and attribute syncing, event delegation, and framework compatibility internally so developers building shared component libraries don't have to write that plumbing themselves for each framework. _Developers building cross-framework design systems can track tools like this on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@allinonetools** · 3 upvotes > Love the HTML-first approach. Avoiding Shadow DOM while keeping SSR and framework compatibility is a refreshing direction for building design systems. ## Similar posts on daily.dev - [Progressive Web Components](https://daily.dev/posts/progressive-web-components-t3lc8pytx) · Hacker News · 4 upvotes · 2 comments - [CSS Web Components for marketing sites](https://daily.dev/posts/css-web-components-for-marketing-sites-zxkljevts) · Hacker News · 81 upvotes · 4 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#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/elena-a-library-for-building-progressive-web-components-pdveiscfo) ```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":"Elena, a library for building Progressive Web Components","url":"https://daily.dev/posts/elena-a-library-for-building-progressive-web-components-pdveiscfo","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/elena-a-library-for-building-progressive-web-components-pdveiscfo"},"datePublished":"2026-08-02T10:37:29.832Z","dateModified":"2026-09-14T07:53:09.191Z","description":"Elena is a 2.9kB library for building Progressive Web Components that prioritizes HTML and CSS rendering before JavaScript hydration. Unlike most web component...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/66de7cb4a7f66338439e86e067609506?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/66de7cb4a7f66338439e86e067609506?_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":1,"discussionUrl":"https://daily.dev/posts/elena-a-library-for-building-progressive-web-components-pdveiscfo","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":56},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"javascript,design-systems,web-components","timeRequired":"PT3M"} {"@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":"Elena, a library for building Progressive Web Components"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/elena-a-library-for-building-progressive-web-components-pdveiscfo","comment":[{"@type":"Comment","text":"Love the HTML-first approach. Avoiding Shadow DOM while keeping SSR and framework compatibility is a refreshing direction for building design systems.","datePublished":"2026-08-04T01:04:12.813Z","url":"https://daily.dev/posts/PDVEIScFO#c-JNJKx9us3","author":{"@type":"Person","name":"AllInOneTools","url":"https://daily.dev/allinonetools","image":"https://media.daily.dev/image/upload/s--4ZT8QlF0--/f_auto/v1769790028/avatars/avatar_igzBsWloJeaegzm9bQltZ?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/elena-a-library-for-building-progressive-web-components-pdveiscfo#faq","mainEntity":[{"@type":"Question","name":"What is Elena and how does it differ from other web component libraries?","acceptedAnswer":{"@type":"Answer","text":"Elena is a small JavaScript library (2.9kB minified and compressed) for building web components using a progressive enhancement model: HTML and CSS render first, and JavaScript hydrates interactivity afterward. Unlike many web component libraries, it doesn't require JavaScript for everything, avoids Shadow DOM barriers for accessibility, has zero runtime dependencies, and works across frameworks like React, Vue, Angular, and Next.js. Teams choosing between web component approaches can compare options like Elena on daily.dev."}},{"@type":"Question","name":"Can web components built with a library work inside React, Vue, and Angular apps at the same time?","acceptedAnswer":{"@type":"Answer","text":"Yes, a library like Elena is designed to work with every major framework or no framework at all, handling cross-framework complexity such as prop and attribute syncing, event delegation, and framework compatibility internally so developers building shared component libraries don't have to write that plumbing themselves for each framework. Developers building cross-framework design systems can track tools like this on daily.dev."}}]} ```