--- title: Best Web Components posts of 2023 | daily.dev description: The most upvoted Web Components posts of 2023, curated by the daily.dev community. canonical: https://daily.dev/tags/web-components/best-of/2023 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/web-components/best-of/2023 og:type: website og:site_name: daily.dev og:title: Best Web Components posts of 2023 | daily.dev og:description: The most upvoted Web Components posts of 2023, 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 — 2023 1. 1 [](/posts/the-art-of-micro-frontends-spu9tdp5s "The Art of Micro Frontends") Article Sysco LABS Sri Lanka · 3y The Art of Micro Frontends The Art of Micro Frontends is a modular architecture design for web. The concept of micro frontends is an extension of the micro services used in backend. Companies such as Netflix, Zalando and Capital One have pushed the pattern to the front, preparing the groundwork for micro-frontends. 135 2 2. 2 [](/posts/things-you-forgot-or-never-knew-because-of-react-pjhjkf0my "Things you forgot (or never knew) because of React") Article Community Picks · 3y Things you forgot (or never knew) because of React React Part 1: An intro about music, defaults, and bubbles. Josh Collinsworth blog post: Things you forgot (or never knew) because of React. Collinsworth: You can keep listening to the same music for the rest of life for life. 110 7 3. 3 [](/posts/building-a-design-system-with-react-web-components-jqc6yosx0 "Building a Design System with React Web Components") Article Community Picks · 3y Building a Design System with React Web Components Building a Design System with React Web Components is a simple way to build a universal design system with React. We compiled React to Web Components using wrappers, polyfills and tooling to make them work in every context. The implementation turned out tougher than we anticipated but we're happy with the result. 85 2 4. 4 [](/posts/how-to-write-components-that-work-in-any-framework-umldywxu0 "How to Write Components that Work in Any Framework") Article freeCodeCamp · 3y How to Write Components that Work in Any Framework The article explains the concept of web components and the technologies that make them up, including custom elements, Shadow DOM, and HTML Templates. It highlights the challenges of writing web components and introduces Lit, a library that simplifies the process by reducing boilerplate code. Lit allows developers to write performant and interoperable web components that can work in any frontend framework. 40 5. 5 [](/posts/an-introduction-to-web-components-b4nrfupfd "An introduction to Web Components") Article Community Picks · 3y An introduction to Web Components Learn about Web Components, which are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Discover how to create a simple Web Component and use Shadow DOM to add styles to a custom element. 39 4 6. 6 [](/posts/nesting-web-components-in-vanilla-javascript-hphtojn3i "Nesting web components in vanilla JavaScript") Article LogRocket · 3y Nesting web components in vanilla JavaScript Web components are native components that work across all browsers without relying on build tools. This article discusses how to create a reusable card component using web components and vanilla JavaScript, as well as how to use layout containers to organize multiple cards. It provides code examples and explains the benefits of using web components. 22 7. 7 [](/posts/building-web-components-with-webc-in-vanilla-javascript-ock2v4jzs "Building web components with WebC in vanilla JavaScript") Article LogRocket · 4y Building web components with WebC in vanilla JavaScript Web components are custom, reusable, and strongly-encapsulated HTML components that can be used in any JavaScript project. Web components solve the encapsulation problem by allowing you to limit the impact of your CSS and JavaScript code to the scope of your component. WebC provides a better authoring experience when writing web components. 22 8. 8 [](/posts/introducing-trendyol-s-open-source-baklava-design-system-vcpiuqtfv "Introducing Trendyol’s Open-Source Baklava Design System") Article Trendyol Tech · 3y Introducing Trendyol’s Open-Source Baklava Design System Trendyol’s Open-Source Baklava Design System is a design system that aims to provide a consistent, accessible, usable, and multi-purpose design language that can be used as a base for many types of digital projects. The return of investment in Design Systems, which accelerates design and development, is enormous. 21 2 9. 9 [](/posts/web-components-reading-list-12-days-of-web-components-akebyg4nq "Web components reading list – 12 Days of Web Components") Article Community Picks · 3y Web components reading list – 12 Days of Web Components A reading list of web component blog posts and resources. Includes the 2023 State of Web Components, debunking myths and misconceptions, and how web components eliminate JavaScript framework lock-in. 20 10. 10 [](/posts/how-to-build-your-first-web-component-pw5c7fkfe "How to Build Your First Web Component") Article freeCodeCamp · 3y How to Build Your First Web Component A web component is a custom HTML element that you define, with its own tag name. This guide is intended as a gentle introduction to the concept, so it won't cover some more advanced aspects such as templates, slots, or shadow DOM. Web components are a nice way to add some extra functionality to your app. 18 11. 11 [](/posts/html-web-components-are-having-a-moment-jvqpfqpx7 "HTML Web Components Are Having a Moment") Article Cloud Four · 3y HTML Web Components Are Having a Moment HTML Web Components are gaining popularity with the help of articles that have recently been published on the topic. These articles have provided a clearer understanding of web components and their potential in web development. 15 12. 12 [](/posts/web-components-will-outlive-your-javascript-framework-pkwxozrd1 "Web Components Will Outlive Your JavaScript Framework") Article Hacker News · 3y Web Components Will Outlive Your JavaScript Framework Web components provide a resilient and portable way to build reusable HTML elements, ensuring longevity and avoiding dependencies. They are an alternative to JavaScript frameworks and can be used with any technology that can render HTML. 15 2 13. 13 [](/posts/shadow-dom-is-for-hiding-your-shame-buojhooko "Shadow DOM is for hiding your shame") Article Community Picks · 3y Shadow DOM is for hiding your shame Shadow DOM allows for clean markup by hiding unnecessary structure. It can be used to build an image carousel and create web components. 14 14. 14 [](/posts/web-components-eliminate-javascript-framework-lock-in-x1llf3gag "Web Components Eliminate JavaScript Framework Lock-in") Article Hacker News · 3y Web Components Eliminate JavaScript Framework Lock-in Web components provide a way to build a web app using different JavaScript frameworks. They encapsulate the frameworks, allowing them to be used without imposing constraints on the rest of the application. 13 15. 15 [](/posts/angular-16-micro-frontends-with-angular-elements-gp3enpyid "Angular 16+ Micro Frontends with Angular Elements") Article Telerik · 3y Angular 16+ Micro Frontends with Angular Elements Angular micro frontends leverage the concept of microservices by breaking down the frontend code and using Angular elements to create custom components. This approach simplifies application maintenance and allows for flexibility in using different frameworks for different components. 12 16. 16 [](/posts/this-week-in-react-162-lit-react-remix-next-js-fresh-next-safe-actions-starlight-rn-0-73-rc--eoeoqfpxh "This Week In React #162: Lit-React, Remix, Next.js, Fresh, next-safe-actions, Starlight, RN 0.73 RC, RCTText, canvaskit-js, vxrn, Rolldown, Vite, Japa, Prisma...") Article This Week In React · 3y This Week In React #162: Lit-React, Remix, Next.js, Fresh, next-safe-actions, Starlight, RN 0.73 RC, RCTText, canvaskit-js, vxrn, Rolldown, Vite, Japa, Prisma... Lit 3.0 has been released with improvements to the framework and the integration of Lit with React. Using native components in React Native can lead to performance gains. ViteConf announced projects such as a Rust port of Rollup and the usage of Vite with Remix and React-Native. 11 [See all Web Components archives](/tags/web-components/best-of) ```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","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/web-components/best-of/2023#page","url":"https://daily.dev/tags/web-components/best-of/2023","name":"Best Web Components Posts of 2023","description":"The most upvoted Web Components posts of 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/web-components/best-of/2023#items","numberOfItems":16,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/the-art-of-micro-frontends-spu9tdp5s","name":"The Art of Micro Frontends"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/things-you-forgot-or-never-knew-because-of-react-pjhjkf0my","name":"Things you forgot (or never knew) because of React"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/building-a-design-system-with-react-web-components-jqc6yosx0","name":"Building a Design System with React Web Components"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/how-to-write-components-that-work-in-any-framework-umldywxu0","name":"How to Write Components that Work in Any Framework"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/an-introduction-to-web-components-b4nrfupfd","name":"An introduction to Web Components"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/nesting-web-components-in-vanilla-javascript-hphtojn3i","name":"Nesting web components in vanilla JavaScript"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/building-web-components-with-webc-in-vanilla-javascript-ock2v4jzs","name":"Building web components with WebC in vanilla JavaScript"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/introducing-trendyol-s-open-source-baklava-design-system-vcpiuqtfv","name":"Introducing Trendyol’s Open-Source Baklava Design System"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/web-components-reading-list-12-days-of-web-components-akebyg4nq","name":"Web components reading list – 12 Days of Web Components"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/how-to-build-your-first-web-component-pw5c7fkfe","name":"How to Build Your First Web Component"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/html-web-components-are-having-a-moment-jvqpfqpx7","name":"HTML Web Components Are Having a Moment"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/web-components-will-outlive-your-javascript-framework-pkwxozrd1","name":"Web Components Will Outlive Your JavaScript Framework"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/shadow-dom-is-for-hiding-your-shame-buojhooko","name":"Shadow DOM is for hiding your shame"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/web-components-eliminate-javascript-framework-lock-in-x1llf3gag","name":"Web Components Eliminate JavaScript Framework Lock-in"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/angular-16-micro-frontends-with-angular-elements-gp3enpyid","name":"Angular 16+ Micro Frontends with Angular Elements"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/this-week-in-react-162-lit-react-remix-next-js-fresh-next-safe-actions-starlight-rn-0-73-rc--eoeoqfpxh","name":"This Week In React #162: Lit-React, Remix, Next.js, Fresh, next-safe-actions, Starlight, RN 0.73 RC, RCTText, canvaskit-js, vxrn, Rolldown, Vite, Japa, Prisma..."}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"Web Components","item":"https://daily.dev/tags/web-components"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/web-components/best-of"},{"@type":"ListItem","position":5,"name":"2023"}]}]} ```