Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zedix/awesome-web-components

A curated list of web components libraries and resources
https://github.com/zedix/awesome-web-components

List: awesome-web-components

awesome awesome-list custom-elements shadow-dom web-components web-standards webcomponents

Last synced: about 1 month ago
JSON representation

A curated list of web components libraries and resources

Awesome Lists containing this project

README 

        
#  Awesome Web Components [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)



> This is a curated list of Web Components articles, design systems, libraries and resources.



> [!NOTE]

> Write once, run anywhere



> [!NOTE]

> Like any technology, they have their quirks and rough edges. But they are built into the browser and there are a lot of capabilities now, growing every year.

> — [Rob Eisenberg](https://x.com/EisenbergEffect/status/1757755646613545453?s=20)



## Latest Articles



- [2024-05-28 — Introducing WebUI 2.0](https://blogs.windows.com/msedgedev/2024/05/28/an-even-faster-microsoft-edge/) — Now rely on a repository of web components

- [2024-05-24 — Introducing the Fabric UX System](https://blog.fabric.microsoft.com/en-us/blog/introducing-the-fabric-ux-system-our-primary-resource-for-extending-fabric-experiences)

- [2024-02-01 — Using Global Styles in Shadow DOM](https://eisenbergeffect.medium.com/using-global-styles-in-shadow-dom-5b80e802e89d)

- [2024-01-31 — The Good, The Bad, The Web Components](https://www.zachleat.com/web/good-bad-web-components)

- [2024-01-17 — Web Components 2024 Winter Update](https://eisenbergeffect.medium.com/web-components-2024-winter-update-445f27e7613a)

- [2024-01-12 — A Modest Web Components Styling Proposal: An “I Know What I’m Doing” Selector ](https://frontendmasters.com/blog/a-modest-web-components-styling-proposal-an-i-know-what-im-doing-selector/)

- [2023-11-27 — Web Components Eliminate JavaScript Framework Lock-in](https://jakelazaroff.com/words/web-components-eliminate-javascript-framework-lock-in/)

- [2023-11-18 — An Attempted Taxonomy of Web Components](https://www.zachleat.com/web/a-taxonomy-of-web-component-types/) HTML vs JavaScript Web Components

- [2023-11-17 — HTML Web Components are Just JavaScript?](https://www.oddbird.net/2023/11/17/components/) — Let the light DOM handle content wherever possible.

- [2023-11-15 — Step into the light (DOM)](https://aaadaaam.com/notes/step-into-the-light-dom/)

- [2023-11-09 — HTML web components](https://adactio.com/journal/20618) — On "[Web augmentations](https://blog.jim-nielsen.com/2023/html-web-components/)"

- [2023-10-25 — Web Components Tailwind And SSR](https://konnorrogers.com/posts/2023/web-components-tailwind-and-ssr/)

- [2023-10-25 — Web Components Will Outlive Your JavaScript Framework](https://jakelazaroff.com/words/web-components-will-outlive-your-javascript-framework/)

- [2023-10-01 — Photoshop is now on the web!](https://medium.com/@addyosmani/photoshop-is-now-on-the-web-38d70954365a)

- [2023-09-21 — The design system ecosystem](https://bradfrost.com/blog/post/the-design-system-ecosystem/) — "We now heartily recommend one specific technology to build a core design system for the web: Web Components."

- [2023-09-09 — W3C Web Sustainability Guidelines (WSG) 1.0](https://x.com/EisenbergEffect/status/1700576705256067380?s=20) — "When custom components are needed, prefer Web Components over framework components"

- [2023-08-23 — Pros and cons of using Shadow DOM and style encapsulation](https://www.matuzo.at/blog/2023/pros-and-cons-of-shadow-dom/)

- [2023-08-23 — Use web components for what they’re good at](https://nolanlawson.com/2023/08/23/use-web-components-for-what-theyre-good-at/)

- [2023-08-18 — Shadow DOM: Not by Default](https://begin.com/blog/posts/2023-08-18-shadow-dom-not-by-default)

- [2023-08-13 — Enhance vs. Lit vs. WebC…or, How to Server-Render a Web Component](https://www.spicyweb.dev/web-components-ssr-node/)

- [2023-08-12 — Shadow Themes](https://dutchcelt.nl/posts/shadow-themes/)

- [2023-08-07 — SEO and Web Components - 2023 Edition](https://dev.to/stuffbreaker/seo-and-web-components-2023-edition-3l6i)

- [2023-07-23 — `handleEvent()` is Mindblowing](https://thathtml.blog/2023/07/handleevent-is-mindblowing/) - [Tip](https://x.com/chrisshank23/status/1776018476249018686)

- [2023-07-20 — Hacker News Lit: Simple, fast web components](https://news.ycombinator.com/item?id=36806747)

- [2023-07-19 — Dynamic Slots](https://www.abeautifulsite.net/posts/dynamic-slots/)

- [2023-06-28 — If Web Components are so great, why am I not using them?](https://daverupert.com/2023/07/why-not-webcomponents/)

- [2023-05-10 — How To Hydrate A Server-Side Rendered Web Component](https://www.dannymoerkerke.com/blog/how-to-hydrate-a-server-side-rendered-web-component/)

- [2023-04-17 — 2023 State of Web Components](https://eisenbergeffect.medium.com/2023-state-of-web-components-c8feb21d4f16)

- [2023-03-27 — Debunking Web Component Myths and Misconceptions](https://eisenbergeffect.medium.com/debunking-web-component-myths-and-misconceptions-ea9bb13daf61) ⭐ — by Rob Eisenberg from the FAST team

- [2023-03-09 — Faster dashboards with web components](https://blog.datawrapper.de/dashboard-performance-web-components/)

- [2023-02-17 — Declarative Shadow DOM: One shadow per root ⭐](https://developer.chrome.com/docs/css-ui/declarative-shadow-dom#one_shadow_per_root)

- [2023-02-13 — Hello Web Components](https://eisenbergeffect.medium.com/hello-web-components-795ed1bd108e)

- [2022-10-21 — Let’s talk about web components](https://bradfrost.com/blog/post/lets-talk-about-web-components/)

- [2022-02-17 — All the Ways to Make a Web Component](https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/)

- [2021-05-26 — Links on Web Components](https://css-tricks.com/links-on-web-components/)

- [2021-05-15 — Container Queries in Web Components](https://mxb.dev/blog/container-queries-web-components/)

- [2020-03-27 — The bright future of Web Components](https://maxart2501.github.io/web-components-talk/codemotion-rm20/#63)

- [2020-02-07 — Web Components Basics and Performance Benefits](https://medium.com/@spkamboj/web-components-basics-and-performance-benefits-f7537c908075)

- [2019-11-07 — The Firefox UI is now built with Web Components](https://briangrinstead.com/blog/firefox-webcomponents/)

- [2019-04-08 — A history of the HTML slot element](https://component.kitchen/blog/posts/a-history-of-the-html-slot-element)

- [2018-09-06 — GitHub is using custom elements for their modal dialogs, autocomplete and display time.](https://githubengineering.com/removing-jquery-from-github-frontend/#custom-elements)

- [2017-03-14 — Brief, incomplete, and mostly incorrect history of Web Components](https://dmitriid.com/blog/2017/03/the-broken-promise-of-web-components/#brief-incomplete-and-mostly-incorrect-history-of-web-components)



## Latest Talks



- [2023-07-06 — The Good, The Bad, and The Web Components - Zach Leatherman | JSHeroes 2023](https://www.youtube.com/watch?v=R4Ri4ft7bXY)

- [2023-06-20 — State of Web Components June 2023](https://youtu.be/lC9sI-S7O8g?t=2789) - "Shoelace and DS are a very easy win in most cases"

- [2023-06-09 — Shining Light on the Shadow DOM | Cassondra Roberts | CSS Day 2023](https://www.youtube.com/watch?v=67bSCEEdaH8)



## Latest Podcasts



- [2023-07-07 — This is going to be Lit](https://changelog.com/jsparty/284)



## Web Components: the native, interopable, component model of the web platform.



```js

import sheet from './base.css' assert { type: 'css' };



class MyButton extends HTMLElement

{

  static observedAttributes = ['my-attr'];// tell the platform about reactive attributes

  #internals;

  #shadowRoot;



  constructor() {

    super();

    // custom construction logic such as creating your shadow DOM

    this.attachShadow({ mode: 'open'});

    this.#shadowRoot.adoptedStyleSheets = [sheet];

    // specify the default ARIA role

    this.#internals = this.attachInternals();

    this.#internals.ariaRole = 'button';

  }



  connectedCallback() {

    // this lifecycle hook is called by the platform when your

    // element is connected to the DOM

  }



  disconnectedCallback() {

    // this lifecycle hook is called by the platform when your

    // element is disconnected from the DOM

  }



  attributeChangedCallback(name, oldValue, newValue) {

    // this lifecycle hook is called whenever one of your

    // observed attributes changes in value

  }

}



customElements.define('my-element', MyButton);

```



- Web Components are the **native component model** on the web platform.

- Web Components **exposes capabilities** previously reserved for native code

- Web Components are **low level** DOM APIs



## Performance



From [About Web Components](https://eisenbergeffect.medium.com/about-web-components-7b2a3ed67a78) by Rob Eisenberg



Web Components have clear performance benefits. There are several reasons for this:



- The core capabilities of Web Components are implemented in C++/Rust as part of each browser’s native HTML parser and runtime. JavaScript frameworks simply can’t match the speed and memory efficiency of C++.



- Because the component model is implemented by the browser, less JavaScript needs to be downloaded, parsed, and executed before a component is able to render.



- With JavaScript frameworks, the browser doesn’t “see” the components and thus can’t optimize for them. It just looks like one gigantic DOM tree to the runtime. With Web Components, the browser knows about every component and its boundaries, and can perform various internal optimizations to improve performance. This is particularly important in applications with large amounts of CSS where the absence of Web Component Shadow DOM makes it impossible to fix certain rendering performance problems. Non-web component libraries literally block the browser from optimizations it could otherwise perform.



- The Web Component model favors modern reactivity patterns and surgical DOM updates that massively outperform the Virtual DOM approaches of libraries like React. You can see this in the way that observedAttributes and the attributeChangedCallback work.



## Specifications



Web components are a [collection](https://w3c.github.io/webcomponents-cg/2022.html) of [web standards](https://github.com/WICG/webcomponents) (W3C Web Components Community Group) that enable an HTML native component model.

They are a meta-specification made possible by the above [specifications](https://techxplore.com/news/2019-06-w3c-whatwg-agreement-version-html.html):



- Shadow DOM

  - [DOM Standard › Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees)



- Custom Elements

  - [HTML Standard › Custom Elements](https://html.spec.whatwg.org/multipage/scripting.html#custom-elements)

  - [Form Associated Custom Elements (Fully Supported)](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/form)



- HTML Templates

  - [HTML Standard › HTML Templates](https://html.spec.whatwg.org/multipage/scripting.html#the-template-element)



- CSS changes

  - [CSS Scoping](https://drafts.csswg.org/css-scoping/)

  - [CSS Shadow Parts](https://drafts.csswg.org/css-shadow-parts/)



- [JSON](https://www.chromestatus.com/feature/5749863620804608), [CSS](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/css-modules-v1-explainer.md), [HTML](https://github.com/WICG/webcomponents/blob/gh-pages/proposals/html-modules-explainer.md) Modules



## Latest Meeting Notes



- [Web Components F2F 2023 Meeting Notes - 2022-04-17 and 2022-04-20](https://docs.google.com/document/d/1XWp4ndl5bthoxhnqR9Ly1SYvYcmXw1eTrappoMXsuH4/edit)



## Drafts, Reviews & Explainers



- [Declarative Shadow DOM (DSD)](https://github.com/whatwg/html/pull/5465)

  - [DCE Demo Discussions](https://github.com/w3c/webcomponents-cg/discussions/87)

  - [Server-Side Rendering (SSR) API](https://github.com/webcomponents-cg/community-protocols/issues/7)

  - [#1009 Capabilities needed and open questions](https://github.com/WICG/webcomponents/issues/1009)

  - [#939 Declarative Adopted Stylesheets](https://github.com/WICG/webcomponents/issues/939)

  - [Can I use `shadowrootmode`?](https://caniuse.com/mdn-html_elements_template_shadowrootmode)

  - [Chrome 90 (`shadowroot` — non-standard)](https://developer.chrome.com/blog/new-in-chrome-90/#declarative)

  - [Chrome 111 (`shadowrootmode` — standardized)](https://developer.chrome.com/en/articles/declarative-shadow-dom/)

  - [Bugzilla #1712140](https://bugzilla.mozilla.org/show_bug.cgi?id=1712140)

  - [Safari Technology Preview 162](https://webkit.org/blog/13851/declarative-shadow-dom/)

    - [Streaming DSD: Chromium Intent to Ship](https://groups.google.com/a/chromium.org/g/blink-dev/c/xzT-vN-bx0s/m/qWrGNWwQAAAJ?pli=1)

    - [Streaming DSD: Playground](https://lit.dev/playground/#gist=d2540b636f7d9d420c2dd8ddd8436c81)



> A declarative API to allow the creation of #shadowroots using only HTML and no Javascript. This API allows Web Components that use Shadow DOM to also make use of Server-Side Rendering (SSR), to get rendered content onscreen quickly without requiring Javascript for shadow root attachment and population.



- [Form-associated custom elements (attachInternals)](https://github.com/whatwg/html/pull/4383)

  - [HTML Living Standard](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example)

  - [Chrome 77](https://www.chromestatus.com/features/4708990554472448)

  - [FF 98](https://bugzilla.mozilla.org/show_bug.cgi?id=1745378)

  - [Safari Technology Preview 162](https://webkit.org/blog/13851/declarative-shadow-dom/)

  - [Creating Custom Form Controls with ElementInternals ](https://css-tricks.com/creating-custom-form-controls-with-elementinternals/)



- [Cross-root ARIA](https://github.com/leobalter/cross-root-aria-delegation)



- [Shadow DOM Delegate Focus](https://blog.whatwg.org/focusing-on-focus)

> When the shadow root of an element has delegates focus flag set, focusing on the shadow host would automatically “delegates” focus to the first focusable element in the shadow tree instead.



- [CSSOM Constructable Stylesheet Objects](https://wicg.github.io/construct-stylesheets/)

- [CSS Custom States (Chromium)](https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet)

- [CSS Theming (Proposal)](https://w3c.github.io/webcomponents-cg/2022.html#theming)



- [my-element:--my-state custom state pseudo class](https://wicg.github.io/custom-state-pseudo-class/)

  - [Chrome 90](https://www.chromestatus.com/feature/6537562418053120)

  - [This feature is not (yet) a standard](https://css-tricks.com/custom-state-pseudo-classes-in-chrome/#this-feature-is-not-yet-a-standard)



- [Children Changed Callback (Proposal)](https://w3c.github.io/webcomponents-cg/2022.html#children-changed-callback)



- [Custom Attributes Proposal](https://github.com/WICG/webcomponents/issues/1029)

  - [Custom Attributes (Identified)](https://eisenbergeffect.medium.com/2023-state-of-web-components-c8feb21d4f16)

    - Enable the creation of reusable behaviors that can be attached to any HTML element (e.g. `Click Me`).



- [Composed Selection (Consensus/No Spec)](https://w3c.github.io/webcomponents-cg/2022.html#initial-api-summary-quick-api-proposal-0)

- [Declarative Custom Element (Proposal)](https://w3c.github.io/webcomponents-cg/2022.html#declarative-custom-elements)



- Rendering & Performance

  - [Declarative Shadow DOM (Mostly Supported)](https://developer.chrome.com/articles/declarative-shadow-dom/)



- Template Instantiation

  - [DOM Parts (Proposal)](https://w3c.github.io/webcomponents-cg/2022.html#initial-api-summary-quick-api-proposal-10)



- Package & Distribution

  - [Lazy Custom Element Definitions (Proposal)](https://w3c.github.io/webcomponents-cg/2022.html#lazy-custom-element-definitions)



```js

customElements.defineLazy('my-element',  async () => (await import('my-element.js')).default);

```



## Libraries for building web components



Some [tools/libraries](https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/board/) that simplify Custom Elements definition and content.



- [Lit](https://lit.dev/)

  - [Relit](https://github.com/43081j/relit) Reusable lit controllers by [James Garbutt](https://twitter.com/43081j)

- [Fast](https://github.com/microsoft/fast)

- [GitHub Catalyst](https://catalyst.rocks/)

- [SkateJS](https://github.com/skatejs/skatejs)

- [Stencil](https://stenciljs.com/) (23/08/2017) A web component compiler (powering Ionic 4)

- [Atomico](https://github.com/atomicojs/atomico)

- [Hybrids](https://hybrids.js.org/)

- [Element-js](https://github.com/webtides/element-js)

- [µce (+µhtml+µce-template+µce-loader)](https://github.com/WebReflection/uce)



## Web Components UI Libraries



- [GitHub Elements](https://github.com/github/github-elements)

- [Material Design Web Components](https://github.com/material-components/material-components-web-components)

- [Chameleon UI](https://github.com/MaritzSTL/chameleon)

  - [Storybook](https://chameleon-design-system.netlify.app/?path=/story/*)

- [Elix](https://component.kitchen/elix)

- [Helix UI](https://helixdesignsystem.github.io/helix-ui/)

- [Kickstand UI](https://kickstand-ui.com/)

- [Kor UI](https://kor-ui.com/)

- [LrnWebComponents](https://github.com/elmsln/lrnwebcomponents)

- [Microsoft Fast](https://fast.design/)

- [Microsoft Graph](https://github.com/microsoftgraph/microsoft-graph-toolkit)

  - [Storybook](https://mgt.dev/)

- [PatternFly Design System](https://github.com/patternfly/patternfly-elements)

- [Shoelace](https://github.com/shoelace-style/shoelace) ❤︎

- [SAP UI5](https://github.com/SAP/ui5-webcomponents)

- [Vaadin](https://github.com/vaadin/web-components) ❤︎

  - [Documentation](https://vaadin.com/docs/latest/ds/overview)



## Design Systems build with Web Components



- [Adobe Spectrum Design System](https://spectrum.adobe.com/)〔Lit〕

  - [Repository](https://github.com/adobe/spectrum-web-components)

  - [Storybook](https://opensource.adobe.com/spectrum-web-components/Storybook/)

- [Astro Space Design System](https://www.astrouxds.com/)〔Lit〕

- [Auro Design System by Alaska Airlines](https://auro.alaskaair.com/)〔Lit〕

- [AXA Pattern Library](https://github.com/axa-ch/patterns-library)〔Lit〕

  - [Storybook](https://patterns.axa.ch/?path=/story/welcome--to-pattern-library)

- [Clever Cloud UI](https://github.com/CleverCloud/clever-components)〔Lit〕

  - [Storybook](https://www.clever-cloud.com/doc/clever-components/)〔Lit〕

  - [Repository](https://github.com/CleverCloud/clever-components)

- [Duet Design System by LocalTapiola](https://www.duetds.com/)〔Stencil〕

- [Freshworks Crayons Design System](https://crayons.freshworks.com/introduction/)〔Stencil〕

  - [Repository](https://github.com/freshworks/crayons)

- [General Electric Edison™ Design System](https://edisondesignsystem.com/)

- [IBM Carbon Design System](https://carbondesignsystem.com/)〔Lit〕〔React〕

  - [Storybook](https://web-components.carbondesignsystem.com/)

  - [Repository](https://github.com/carbon-design-system/carbon-custom-elements)

  - [React](https://react.carbondesignsystem.com/?path=/docs/getting-started-welcome--welcome)

    - [Button.tsx](packages/react/src/components/Button/Button.tsx)

    - [_button.scss](https://github.com/carbon-design-system/carbon/blob/main/packages/react/scss/components/button/_button.scss)

- [ING Lion Design System](https://github.com/ing-bank/lion) + [Lion Components](https://lion-web.netlify.app/)〔Lit〕

  - [Repository](https://github.com/ing-bank/lion)

- [Microsoft Fluent UI](https://developer.microsoft.com/en-us/fluentui)〔Fast〕

  - [Fast](https://learn.microsoft.com/en-us/fluent-ui/web-components/components/overview)

  - [React](https://react.fluentui.dev/?path=/docs/concepts-introduction--page)〔React〕

  - [Repository](https://github.com/microsoft/fluentui)

- [MixPanel Design System](https://design.mixpanel.com/#mp-button)〔[Panel](https://github.com/mixpanel/panel)〕

- [Nord Design System](https://nordhealth.design/)〔Lit〕

- [Porsche Design System](https://designsystem.porsche.com/latest/#/start-coding/vanilla-js)〔Stencil〕〔Angular〕〔React〕〔Vue〕

  - [Repository](https://github.com/porsche-design-system/porsche-design-system/tree/main/packages/components/src/components)

- [Red Hat Design System](https://ux.redhat.com/)〔Lit〕

- [Telekom Scale Design System](https://telekom.github.io/scale/)〔Stencil〕

  - [Repository](https://github.com/telekom/scale)

- [VMware Clarity Design System](https://clarity.design/)

- [Volkswagen GroupUI Design System](https://volkswagen.frontify.com/d/rzB71PwpjXgt)



## Sites build entirely with Web Components



- [MSN](https://www.msn.com/fr-fr)

> A couple of years back, Microsoft re-built the MSN experience with the [Fluent UI Web Components based on FAST](https://learn.microsoft.com/en-us/fluent-ui/web-components/). This improved performance by 30%–50% over the previous React version Approximately 1,500 teams and/or projects within Microsoft have adopted FAST Web Components in the last three years (from 2022).

- [Reddit](https://twitter.com/addyosmani/status/1677776509837402112?s=20) ([shreddit-mod-comment](https://sh.reddit.com/)) Lit

- [RedHat](https://www.redhat.com/) (``)

- [Bing](https://www.bing.com/)

- [British Gas](https://www.britishgas.co.uk/)

- [Photoshop for Web](https://photoshop.adobe.com/)

  - [Photoshop is now on the web!](https://medium.com/@addyosmani/photoshop-is-now-on-the-web-38d70954365a)

  - [CSS Findings From Photoshop Web Version](https://ishadeed.com/article/photoshop-web-css/)

- [Fast](https://www.fast.design/)

- [Ideanote](https://start.ideanote.io/)

- [Simplr](https://simplr.company/)

- [ViteMaDose](https://vitemadose.covidtracker.fr/)

- [YouTube](https://www.youtube.com/) (``)

- [App Store for Windows](https://apps.microsoft.com/home?hl=en-us&gl=FR) [Source](https://x.com/justinfagnani/status/1710090787097346085?s=20)

> The software giant has [ditched its old React codebase](https://www.theverge.com/2023/10/6/23906082/microsoft-windows-app-store-web-version-launch) from its previous web version of the Microsoft Store and replaced it with a modern web version that uses Shoelace, Lit, Vite, and a C# ASPNET backend.



## Sites using Lit elements



- [ChromeDevTools](https://twitter.com/steren/status/1633359619874754561?s=20) (``)

- [VSCode](https://github.com/microsoft/vscode-webview-ui-toolkit)

- [TikTok](https://twitter.com/justinfagnani/status/1633831934643273730) (``)

- [Figma](https://twitter.com/ChrisDHolt/status/1584982495887781890?s=20)

- [SpaceX](https://www.reddit.com/r/spacex/comments/gxb7j1/comment/ft6bydt/)

- [Shopify](https://shopify.engineering/shopifys-platform-is-the-web-platform) (``)

- [Adobe Firefly](https://twitter.com/justinfagnani/status/1661082772419772416?s=20)

- [Firefox](https://github.com/mozilla/gecko-dev/blob/master/toolkit/content/widgets/lit-utils.mjs)

- [Google Maps API](https://developers.google.com/maps/documentation/javascript/web-components/overview?hl=fr) (``)



## Frameworks



- [Tini](https://tinijs.dev/)

- [Gracile](https://gracile.js.org/)

- [Enhance (SSR First)](https://enhance.dev/) by [Brian Leroux](https://begin.com/blog/posts/2023-02-23-enhancing-fwas-with-web-components) + [Enhance Movies Showcase (3.9 kb JS compressed)](https://begin.com/blog/posts/2023-07-26-introducing-enhance-movie) – Enhance provides file-based routing, reusable Custom Elements, a customizable utility CSS system, and mapped API data routes that get deployed to isolated, single-purpose cloud functions, no build steps to configure.

- [Hybrids](https://hybrids.js.org/)

- [Rocket](https://rocket.modern-web.dev/) – A modern web [setup](https://twitter.com/techytacos/status/1408507828063535109) for static sites with a sprinkle of JavaScript.

- [Eleventy with WebC](https://www.11ty.dev/docs/languages/webc/)

  - [Introduction to WebC](https://11ty.rocks/posts/introduction-webc/)

- [Appolo Elements](https://apolloelements.dev/)

- [CrossBow](https://crossbow-wc-2ayn6.ondigitalocean.app/) – The goal of Crossbow is to be the _Next.js_ for web-components.



## Routers (URL Pattern Standard)



- [@thepassle/app-tools/router.js](https://github.com/thepassle/app-tools/tree/master/router) ([URL Pattern Standard](https://urlpattern.spec.whatwg.org/)), used by [App Store for Windows](https://x.com/claviska/status/1711011601015341279?s=20)

- [@vaadin/router](https://github.com/vaadin/router)

- [@lit-labs/router](https://github.com/lit/lit/tree/main/packages/labs/router)

- [@microsoft/fast-router](https://github.com/microsoft/fast/tree/master/packages/web-components/fast-router)



## State across multiple components (TC39 Signals)



- [Haunted](https://github.com/matthewp/haunted)

- [Signals: TC39 Proposal](https://eisenbergeffect.medium.com/a-tc39-proposal-for-signals-f0bedd37a335)

- [Signals: TC39 Prez (for Stage 1)](https://docs.google.com/presentation/d/1MJqndTS5RmTEwTbtLTPsEloc-a_MWR8daQINgDim2RA/edit#slide=id.g1f570b058be_0_901)

- [Signals: Lit example](https://lit.dev/playground/#gist=a1b12ce26246d3562dda13718b59926c)



```js

const counter = new Signal.State(0);

const isEven = new Signal.Computed(() => (counter.get() & 1) == 0);

```



## Stores



- [Nanostores](https://github.com/nanostores/nanostores)



## Accessibility



- [How Shadow DOM and accessibility are in conflict](https://alice.pages.igalia.com/blog/how-shadow-dom-and-accessibility-are-in-conflict/)

- [Accessibility in the Vaadin Platform](https://vaadin.com/accessibility)

- [2023-07-09 — Web Components Accessibility FAQ](https://www.matuzo.at/blog/2023/web-components-accessibility-faq/)

- [2023-02-22 — How Shadow DOM and accessibility are in conflict](https://alice.pages.igalia.com/blog/how-shadow-dom-and-accessibility-are-in-conflict/)

- [Cross-root ARIA Reflection API explainer](https://github.com/Westbrook/cross-root-aria-reflection/blob/main/cross-root-aria-reflection.md)



## Widgets / Standalone elements



- [Rhino Editor](https://github.com/konnorrogers/rhino-editor)

- [Swiper Element](https://swiperjs.com/element)

- [Mux Uploader](https://docs.mux.com/guides/video/mux-uploader)

- [Google Map Widget](https://cloud.google.com/blog/products/maps-platform/build-maps-faster-web-components)

- [Stripe Pricing Table](https://stripe.com/docs/payments/checkout/pricing-table)



## History



-  2012, W3C launched the [first specification](https://www.w3.org/TR/2012/WD-components-intro-20120522/?ref=web-highlights.com#decorators-vs-custom-elements) of Web Components



## Resources



- [📈 Custom Element Popularity (`CustomElementRegistryDefine` stats)](https://chromestatus.com/metrics/feature/timeline/popularity/1689)

- [📈 Percentage of page loads that use custom element: over 19%](https://www.chromestatus.com/metrics/feature/timeline/popularity/1689)

- [Companies using Web Components](https://arewebcomponentsathingyet.com/)

- [Web Components Community](https://community.webcomponents.dev/)

- [Web Components and lists](https://twitter.com/techytacos/status/1407068338644144155)

- [Awesome Lit](https://github.com/web-padawan/awesome-lit)

- [Awesome Standalones](https://github.com/davatron5000/awesome-standalones)

- [Starter Templates](https://webcomponents.today/starter-templates/)

- [Stubbornella on WC/Wasm](https://news.ycombinator.com/item?id=34632657)

- [FUD: Web components suck! No one is using them!](https://x.com/EisenbergEffect/status/1717188337713201197?s=20)