--- title: Best Web Components posts of 2025 | daily.dev description: The most upvoted Web Components posts of 2025, curated by the daily.dev community. canonical: https://daily.dev/tags/web-components/best-of/2025 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/web-components/best-of/2025 og:type: website og:site_name: daily.dev og:title: Best Web Components posts of 2025 | daily.dev og:description: The most upvoted Web Components posts of 2025, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of Web Components — 2025 1. 1 [](/posts/frontend-designers-developers-meet-your-new-best-friend--xow8hebq4 "🚀 Frontend Designers & Developers, Meet Your New Best Friend! 🎨💻") Article Dev World · 2y 🚀 Frontend Designers & Developers, Meet Your New Best Friend! 🎨💻 Discover an incredible resource for frontend designers and developers with calltoinspiration.com. This site offers a vast collection of beautifully designed web components like forms, alerts, tabs, dropdowns, and cards. It's perfect for elevating your projects and unleashing your creativity. Check it out to design better and faster. 3.5K 198 2. 2 [](/posts/the-micro-frontend-architecture-handbook-ny57eyzsg "The Micro-Frontend Architecture Handbook") Article freeCodeCamp · 1y The Micro-Frontend Architecture Handbook A comprehensive guide covering four main approaches to micro frontend architecture: iframes with cross-window messaging, Web Components with Shadow DOM, single-spa for orchestrating multiple SPAs, and Module Federation for runtime code sharing. Each method is explained with practical code examples, pros/cons analysis, and real-world use cases. The guide also covers additional tools like Piral, Luigi, and Import Maps, helping developers choose the right approach based on team structure, technical requirements, and deployment needs. 434 9 3. 3 [](/posts/this-website-has-no-class-vi2ohuucz "This website has no class") Article Hacker News · 1y This website has no class A developer experiments with removing all CSS classes from their personal website, instead relying on semantic HTML elements, custom tags, and custom attributes for styling. The approach reduces CSS bundle size to \~5KB and improves accessibility, but requires more careful planning and deeper HTML/CSS knowledge. While successful for a personal project, the author acknowledges it may not scale well for larger teams with varied frontend expertise. 188 18 4. 4 [](/posts/web-components-demystified-ubob2ghpl "Web Components Demystified") Article CSS-Tricks · 2y Web Components Demystified Explore the fundamentals of web components with Scott Jehl's course, 'Web Components Demystified'. Learn about the creation and behavior of custom HTML elements, usage of HTML templates, encapsulation with Shadow DOM, and lifecycle methods for web components. The content highlights the differences between web components and JavaScript framework components like React. Also discussed are best practices for styling, handling slots, and using custom properties within Shadow DOM. 111 1 5. 5 [](/posts/web-components-are-the-comeback-nobody-saw-coming-5oxazwtym "Web Components Are the Comeback Nobody Saw Coming") Article The New Stack · 41w Web Components Are the Comeback Nobody Saw Coming Web components are experiencing a resurgence as developers tire of framework complexity and bloated bundles. Native browser APIs like custom elements and Shadow DOM offer framework-agnostic, lightweight alternatives that work across React, Vue, or vanilla JavaScript without modification. Major browser support is now stable, and libraries like Lit have improved developer experience. The interoperability advantage makes web components ideal for design systems and microfrontends, allowing teams to build reusable UI components once and deploy them anywhere. As performance budgets tighten and framework fatigue sets in, the native web platform capabilities are proving sufficient for most modern applications. 109 13 6. 6 [](/posts/a-brief-introduction-to-web-components-uiusbtcek "A Brief Introduction to Web Components") Article freeCodeCamp · 1y A Brief Introduction to Web Components Learn the basics of Web Components, a set of standardized browser APIs allowing the creation of custom reusable HTML elements in web applications. The tutorial includes interactive 'code playbacks' to guide you through building modular and encapsulated components for a frontend, emphasizing self-contained design and data management techniques. Key topics covered also involve comparison with React, handling custom events, and creating a complete app with authentication. 95 1 7. 7 [](/posts/html-web-components-proposal-from-1998-byxgmctnu "HTML Web Components Proposal From 1998") Article CSS-Tricks · 44w HTML Web Components Proposal From 1998 Web components have roots dating back to a 1998 W3C proposal that introduced the concept of componentization for building applications using reusable building blocks. The proposal emphasized breaking down complex applications into manageable chunks without requiring deep understanding of internal implementation details. While often perceived as a recent feature, the idea of style encapsulation and component-based architecture has been evolving for nearly 30 years in web development history. 82 4 8. 8 [](/posts/css-tricks-csvwwco6p "CSS-Tricks") Article CSS-Tricks · 1y CSS-Tricks KelpUI is a new CSS library by Chris Ferdinandi that combines modern CSS features with Web Components. The library emphasizes base styles, utility classes, CSS variables for customization, and Web Components that keep HTML in the light DOM. It uses CSS Cascade Layers for logical structure, maintains low specificity selectors, includes accessible color palettes, and can be loaded from CDN or downloaded locally. The development process is being openly documented through a series of blog posts. 78 7 9. 9 [](/posts/microfrontends-the-right-way-usleonyxz "Microfrontends the right way") Video Awesome · 1y Microfrontends the right way Microfrontends promise independent deployments and team autonomy but often introduce unnecessary complexity. While the concept addresses organizational challenges more than technical ones, several implementation approaches exist: iframes provide hard isolation but poor UX, web components offer framework-agnostic custom elements with shadow DOM, single-spa adds orchestration layers that create distributed system complexity, and Webpack's module federation enables runtime code sharing. Modern browsers support native ES modules for cross-domain imports, potentially reducing bundler dependency. Astro's island architecture emerges as a practical solution, loading UI components only when needed. 66 3 10. 10 [](/posts/simple-one-time-passcode-inputs-jhx9m8wvh "Simple One-Time Passcode Inputs") Article Cloud Four · 47w Simple One-Time Passcode Inputs Build fully functional one-time passcode (OTP) inputs using semantic HTML with proper attributes like inputmode, autocomplete, and pattern validation. The approach demonstrates how to create accessible, progressively enhanced OTP forms without complex JavaScript frameworks or multiple input elements, using a single text input with clear labeling and optional styling enhancements through CSS and lightweight web components. 62 1 11. 11 [](/posts/syntax-highlight-element-g6gv5cdvt " element") Article Community Picks · 1y element A web component library that provides syntax highlighting functionality using the CSS Custom Highlight API. The component can be imported as an ES module or via CDN, used with simple HTML markup by specifying a language attribute, and styled with CSS themes. Limited themes are currently available, but custom themes can be created. 58 4 12. 12 [](/posts/stop-ignoring-the-browser-the-biggest-frontend-shift-in-a-decade-gaxocaxtk "Stop Ignoring the Browser: The Biggest Frontend Shift in a Decade") Article The New Stack · 1y Stop Ignoring the Browser: The Biggest Frontend Shift in a Decade Modern browsers now natively support features that once required frameworks like React and Angular. Native APIs for routing, state management, component isolation, and animations are reducing the need for heavy framework dependencies. While frameworks still offer value through conventions and ecosystem support, they're shifting from necessity to preference. Standards-based development using Shadow DOM, ES modules, Navigation API, and Web Components can deliver better performance with smaller bundle sizes, especially for mobile and edge computing environments. The web platform has matured enough to handle modern application development without framework intermediaries. 45 7 13. 13 [](/posts/a-different-approach-to-frontend-wqi4hli3g "A Different Approach To Frontend") Video ThePrimeTime · 2y A Different Approach To Frontend The post suggests that a negative perception of front-end development may stem from a specific design philosophy. It encourages trying out web components, possibly with a bit of bus and HTMX, to rediscover an enjoyment in front-end projects. The author posits that mixing traditional and modern techniques could make front-end development more enjoyable. 44 1 14. 14 [](/posts/shadow-dom-building-perfectly-encapsulated-web-components-wsr2m6wys "Shadow DOM: Building Perfectly Encapsulated Web Components") Article DEV · 2y Shadow DOM: Building Perfectly Encapsulated Web Components Shadow DOM provides true encapsulation for web components by attaching a hidden separate DOM tree to an element in the regular DOM tree. This encapsulation prevents styles and scripts from leaking in or out, making components modular and easily reusable. It’s particularly useful for styling third-party widgets, building reusable UI components, and enabling custom theming. Despite challenges like browser support and a learning curve, Shadow DOM helps create scalable, maintainable, and reliable web components. 33 15. 15 [](/posts/launching-mdn-s-new-front-end-myf0tbav8 "Launching MDN's new front end") Article MDN Blog · 1y Launching MDN's new front end MDN Web Docs has launched a completely rebuilt front end, redesigned and reengineered from the ground up. The update focuses on modern web technologies following Baseline compatibility guidelines, featuring improved typography, consistent code rendering, refreshed icons using the Lucide library, a new search modal, and redesigned top navigation. The team used modern CSS and web components while ensuring wide browser compatibility through progressive enhancement. 30 1 16. 16 [](/posts/vanilla-javascript-support-for-tailwind-plus-lj1tljezq "Vanilla JavaScript support for Tailwind Plus") Article tailwindcss · 1y Vanilla JavaScript support for Tailwind Plus Tailwind Plus now includes vanilla JavaScript support through @tailwindplus/elements, a library of headless custom elements that make interactive UI components like dropdowns, dialogs, and command palettes work without requiring React or Vue. The library leverages modern web platform features like custom elements, the popover attribute, and native dialog elements to provide accessible, framework-agnostic components that can be styled with utility classes and work across different web frameworks. 30 1 17. 17 [](/posts/mesh-i-tried-htmx-then-ditched-it-oolggdjhb "MESH: I tried HTMX, then ditched it") Article Hacker News · 1y MESH: I tried HTMX, then ditched it A developer explores HTMX for HTML-first web development but finds it lacks the structure of SPA frameworks. They create MESH, a framework that combines server-side rendering with web components using a "one component = one endpoint" principle. The project demonstrates building interactive features like drag-and-drop and real-time collaboration, ultimately replacing HTMX with custom JavaScript while maintaining the benefits of modular SSR. 28 16 18. 18 [](/posts/rewriting-my-site-in-vanilla-web-bsp6flx0i "Rewriting my site in vanilla web") Article Lobsters · 2y Rewriting my site in vanilla web The author discusses their experience rewriting their website using vanilla HTML, CSS, and JavaScript, moving away from frameworks and libraries to achieve greater simplicity and control. They explain their rationale, the principles they followed, and the methodologies they used, such as semantic HTML, TAC CSS, and Web Components with Light DOM. The post also touches on the advantages and challenges of this approach, tips for efficient conversion, and the pragmatic adjustments necessary for the project's success. 16 5 19. 19 [](/posts/create-your-retro-8-bit-profile-card-with-8bitcn--h3ogjybkd "Create Your Retro 8-Bit Profile Card with 8bitcn! 🎮") Article Horde · 1y Create Your Retro 8-Bit Profile Card with 8bitcn! 🎮 8bitcn launched a new profile card creator that lets users generate retro 8-bit style profile cards. Users can customize their cards with personal information and images, choose from multiple retro themes, download the results as images, and copy the code via Shadcn registry for integration into their projects. 14 11 20. 20 [](/posts/boredom-another-boring-js-framework-7zmd8qfld "boreDOM another boring JS framework") Article Lobsters · 2y boreDOM another boring JS framework The post introduces 'boreDOM,' a new JavaScript framework designed for manipulating the DOM with a small JS footprint. It allows developers to use existing HTML, CSS, and JS files more effectively by leveraging