--- title: Best Web Components posts of 2022 | daily.dev description: The most upvoted Web Components posts of 2022, curated by the daily.dev community. canonical: https://daily.dev/tags/web-components/best-of/2022 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/web-components/best-of/2022 og:type: website og:site_name: daily.dev og:title: Best Web Components posts of 2022 | daily.dev og:description: The most upvoted Web Components posts of 2022, 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 — 2022 1. 1 [](/posts/building-a-micro-frontend-framework-gzxbxqovr "Building a Micro-frontend Framework") Article Community Picks · 4y Building a Micro-frontend Framework Micro-frontend architecture is a design approach in which a front-end app is decomposed into individual, semi-independent “microapps’ working loosely together. The idea is that the individual microapps within a macroapp (as we shall call the composed, top-level app) are analogous to the various iframes. There is still a long laundry list of issues to be aware of when using iframe. 61 5 2. 2 [](/posts/a-complete-introduction-to-web-components-in-2022-jlfhp7ak8 "A Complete Introduction to Web Components in 2022") Article Community Picks · 4y A Complete Introduction to Web Components in 2022 Frameworks allow developers to create web components where the content, styling, and functionality can be defined in a single JavaScript file. Standard Web Components can add browser functionality, which is difficult to achieve in. The class requires a method named connectedCallback() which is invoked when the element is added to a document: class HelloWorld extends HTMLElement. 36 2 3. 3 [](/posts/an-introduction-to-native-web-components-jb5xyfvvx "An Introduction to Native Web Components") Article asayer · 4y An Introduction to Native Web Components Native Web Components provide a way to create encapsulated, single-responsibility, custom functionality that can be used with or without a framework. The concepts were first introduced by Alex Russell at the Fronteers Conference in 2011\. The browser can call one of six handler methods depending on the current state of the web component. It typically runs clean-up operations such as aborting in-flight Fetch()requests. 34 2 4. 4 [](/posts/using-web-components-with-next-or-any-ssr-framework-css-tricks-amwwlvw9l "Using Web Components With Next (or Any SSR Framework) | CSS-Tricks") Article CSS-Tricks · 4y Using Web Components With Next (or Any SSR Framework) | CSS-Tricks Web Components with Next (or Any SSR Framework) can be used with any JavaScript framework. The problem is the lack of support for server-side rendering (SSR) There is something called the Declarative Shadow DOM (DSD) in the works, but current support for it is pretty minimal. The code to make Web Components do what they need to do won't actually run until hydration occurs. We’ll look at running that code. 12 5. 5 [](/posts/let-s-talk-about-web-components-nsvbpoukg "Let’s talk about web components") Article Community Picks · 4y Let’s talk about web components Web components are a collection of technologies that work together to deliver reusable UI components to the web. Web components handle the presentational aspects of a component, but are intentionally dumb. The overwhelming majority of web components don’t need to be web components. 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/2022#page","url":"https://daily.dev/tags/web-components/best-of/2022","name":"Best Web Components Posts of 2022","description":"The most upvoted Web Components posts of 2022, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/web-components/best-of/2022#items","numberOfItems":5,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/building-a-micro-frontend-framework-gzxbxqovr","name":"Building a Micro-frontend Framework"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/a-complete-introduction-to-web-components-in-2022-jlfhp7ak8","name":"A Complete Introduction to Web Components in 2022"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/an-introduction-to-native-web-components-jb5xyfvvx","name":"An Introduction to Native Web Components"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/using-web-components-with-next-or-any-ssr-framework-css-tricks-amwwlvw9l","name":"Using Web Components With Next (or Any SSR Framework) | CSS-Tricks"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/let-s-talk-about-web-components-nsvbpoukg","name":"Let’s talk about web components"}]},{"@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":"2022"}]}]} ```