A curated list of awesome Web Components resources.
Note
This project was previously named "Web Components the Right Way"
Web Components — a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
Custom Elements provide a way for authors to build their own fully-featured DOM elements.
Shadow DOM describes a method of combining multiple DOM trees into one hierarchy and how these trees interact with each other within a document, thus enabling better composition of the DOM.
<template> element is used to declare fragments of HTML that can be cloned and inserted in the document by script.
CSS Shadow Parts allow developers to expose certain elements inside Shadow DOM for styling purposes.
Collection of generic web components with a focus on accessibility, and ease of use.
Collection of web components that implement common web UI patterns.
Collection of accessible, customizable, ultra-light web components.
Collection of best practices and design patterns for developing web components.
Vanilla JS UI component library of HTML deprecated tags.
Series of web components examples, related to the MDN web components documentation.
Editable table web component.
API documentation and live playground for Web Components.
Standalone chess board web component.
Web component for drawing patterns with CSS.
Custom element that allows to create a dark mode toggle or switch.
Web component for chat with AI capabilities.
Lightweight emoji picker, distributed as a web component.
Accessible modal dialog web component.
Web component built with Svelte to view files.
Web component to visualize JSON data in a tree view.
Lite YouTube embed with a focus on visual performance.
MIDI file player and visualizer web components.
Web component for rendering interactive 3D models.
Modern rich text editor with plugin architecture, immutable state, and zero-config framework-agnostic deployment.
Custom element that embeds PDF.js default viewer.
Skeleton loader that measures your real DOM to render matching shimmer placeholders.
Media player web component.
Custom element to progressively enhance image placeholders.
Accessible range slider custom element with keyboard support.
Web component for creating documentation from OpenAPI Specification.
Web component for writing and rendering shaders.
Animated toggle button to switch between light, dark, and system theme.
Rich text editor custom element for everyday writing.
Customizable, extensible, accessible and framework agnostic media player.
Bring [web vitals](https://github.com/GoogleChrome/web-vitals) quickly into your page using custom elements.
<qr-code> – Web component for rendering customizable, animate-able, SVG-based QR codes.A CLI-based UI component library that copies Lit web components directly into your project. Full React and Vue wrappers for native framework experience.
Web component framework for easily creating user-first websites, stories, ads, emails and more.
Collection of rich web components that includes framework bindings. Created with StencilJS.
Custom elements for using Apollo GraphQL with various web components libraries.
AXA CH UI components library built with Web Components.
Web components for creating interfaces by Blackstone Publishing.
Set of web components powered by Blaze CSS.
Collection of web components for building Brightspace applications.
Web components for rendering MCP tool-call output as UI.
Collection of Web Components made by Clever Cloud.
Web components for creating interactive scientific articles.
Standalone Components for SPA routing, displaying data from web services, and more.
General use Web Components for websites and applications.
Collection of custom elements for "a la carte" web development.
GitHub's Web Component collection.
High-quality, customizable web components for common user interface patterns.
Enterprise ready set of web components which work best with Eclipse Furo.
Ser of web components used by Equinor Fusion.
Complete library of UI components from Infragistics.
Set of web components for embedding immersive (VR & AR) content.
Compilation of Joomla 4 Custom Elements.
Web components library for Sme.UP.
Lightweight, customizable loading animations/spinners.
Set of highly performant, accessible and flexible Web Components.
ELMS:LN produced web components for any project.
Custom elements for 3D graphics. Built with Three.js for WebGL/WebGPU rendering, and Solid.js for reactivity and templating.
Web Components for rapid development of openEHR and FHIR systems.
Collection of web components for the Microsoft Graph.
A schema for mutation testing results with the web components to visualize it.
Data visualisation web components for the life sciences.
Components for building web applications with Nuxeo using Web Components.
Set of web components for Red Hat One Platform.
Collection of web components designed for business applications.
Re-usable web components dedicated to data annotation tasks.
Serverless code experiences with web components.
A forward-thinking library of web components.
Web components for business applications.
Custom Element Wrapper for Stripe.js v3 Elements.
Collection of web components used by TEI Publisher and apps generated by it.
Collection of lightweight web components used by Leavitt Group Enterprises.
Reusable Tradeshift UI Components as Web Components.
Components to generate simple, light and responsive charts.
Collection of user interface web components for Umbraco CMS.
Evolving set of high-quality web components for building business web applications.
Components for creating VSCode extensions which use the Webview API.
Collection of charting web components for Warp 10.
Set of Webmarkets' public web components.
Set of common UI elements with a hand-drawn, sketchy look.
Web Components for Arduino and various electronic parts.
Collection of web components implementing portions of the OpenWeatherMap API.
Set of components to build rich space app experiences with established interaction patterns.
Alaska Airlines design system to innovate on ideas and collaborate on the future.
Web Component based design system with flexible and lightweight components.
Twig and Web Component-powered UI components, reusable visual styles and tooling.
Shared Web Components for Esri's Calcite design framework.
Carbon Design System variant on top of Web Components.
Suite of web components from the Clarity Design System.
Collection of web components that adheres to the Freshworks Design System.
Library of Web Components based on the FAST design language.
Library of Web Components that supports Microsoft's Fluent design language.
Library of Web Components adhering to the Forge Design System.
Set of encapsulated web components consuming the GOV.UK Design System.
Web Component library for the Helix Design System.
UI component library based on the Liquid Design System.
Building blocks of the Lyne Design System are based on Web Components.
Material Design implemented as Web Components.
Set of UI components based on Momentum Design.
Nordhealth’s design system for products, digital experiences and brand.
HTML Framework and Design System based on Web Components and runtime CSS generation.
The Design Language and UI Agent Harness for AI/ML Factories, Robotics, and Autonomous Vehicles.
Web component based design system starter kit.
Collection of flexible and lightweight Web Components based on the Unified Design Kit.
JSTOR's design system to create cohesive, supportive, and beautiful experiences.
Web components for building uniform experiences with the Red Hat brand.
Web Components implementing Siemens iX design system.
Adobe Spectrum design language implementation built with Web Components.
Set of reusable UI elements implementing SAP Fiori Design Guidelines.
University of Michigan Library Design System.
Set of web components that implement Z+ shop style guide.
Progressive Web Components library.
Simple and lightweight base classes for web components with a beautiful API.
Lightweight library for building performant, memory-efficient, standards-compliant Web Components.
Building blocks and utilities that are used when building Forge Web Components.
Set of small libraries designed to add the bare minimum to web components to make you productive.
Simple library for building fast, lightweight web components.
blazing fast, enterprise-grade Web Components foundation.
Write custom elements with reactivity and templating powered by Solid.js signals and effects.
Next generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating).
Web Components + Virtual DOM: web standards for powerful UIs.
Write custom element classes with decorators. No dependencies.
Fast & Robust Front-End Micro-framework based on modern standards.
Compiler for generating Web Components.
Minimalist, stable, audit friendly component framework.
Web Components engine based on VDOM, JSX, MobX & TypeScript.
Small library for the creation of interfaces based on web components using functions and hooks.
A lightweight library for building functional web components using signals and Lit.
React's Hooks API implemented for web components.
UI library for creating Web Components with simple and functional API.
Library that extends Solid adding Custom Web Components and extensions.
Render Ember and Glimmer components using custom elements.
Generate/register a custom element from a preact component.
Automate the wrapping of a React component in a custom element.
Export your project components as custom elements for integration into external pages.
Utilise Shadow DOM in React with all the benefits of style encapsulation.
Use web components with React properties and functions.
Mount React components to the DOM using custom elements.
Simple API to create vanilla custom elements with Riot.js.
Benchmark Web Components technologies with various examples.
The same todo application built in different Web Components libraries for benchmark purpose.
Web component framework to easily create user-first experiences for the web.
Web standards-based HTML framework for building lightweight web applications.
SSR framework that makes working with the WebComponents standard a breeze.
Modern web setup for static sites with a sprinkle of JavaScript.
Compiler to make server-side rendering of native web components easier.
Framework-independent standalone HTML serializer for generating markup for web components.
Web component project scaffolding.
Boilerplate for creating a custom element.
Simple starter hello world web component written in TypeScript.
Build, test, and publish vanilla Web Components with a little spice.
Ruby gem that adds basic support for the Shadow DOM to Capybara.
How to run component tests for a Lit web component with Cypress.
Test your Lit elements and native web components in Cypress with all the modern browsers.
Using @web/test-runner for testing web components in a real browser.
Locating Shadow DOM elements using Selenium WebDriver in a Maven project.
Shadow DOM and open-source testing frameworks.
Opinionated package that combines and configures testing libraries.
querySelector that can pierce Shadow DOM roots, useful for automated testing.
Shadow DOM automation using Selenium.
In Selenium 4, there is now a way to access Shadow DOM nodes.
So you’ve created a native web component or two. How do you test them in popular browsers?
Shadow DOM tree and its interaction with the W3C Webdriver.
Chrome extension to find custom elements on a page.
UI development environment for plain web-component snippets.
Component IDE for web platform developers.
CLI that analyzes web components and emits documentation / diagnostics.
Codemods for Web Components.
Book by Ben Farrell, available at Manning early release program.
Book by Mark Volkmann, available at Manning early access program.
Book by Cory Rylan, early preview edition available at Leanpub.
Document by Google Chrome team.
Feature in Chrome platform status.
Feature in Chrome platform status.
Prototyping system built with web components and the Houdini Paint API.
Publish, discuss and rate web components
Discuss & share web components.
Custom Elements polyfill by Polymer team.
Custom Elements polyfill by Andrea Giammarchi.
Customized built-in elements polyfill by [CorpusculeJS](https://github.com/corpusculejs).
Customized built-in elements polyfill by [ungap project](https://ungap.github.io).
ShadowDOM v1 shim.
ShadowDOM style encapsulation shim.
Shadow DOM polyfill by [LWC](https://lwc.dev).
Minimal polyfill for `<template>`.
An `importNode` polyfill for IE11 by [ungap project](https://ungap.github.io).
Modern browsers supports web components standards without any of the polyfills listed below.
The only notable exception is that customized built-in elements are rejected by WebKit (Safari).
The articles below represent a long story of the Web Components specifications on the way towards the standardization.
Some of them refer to earlier, so-called "v0" Shadow DOM and Custom Elements specs, and abandoned HTML Imports spec.
These materials are here for historical reasons only, they are grouped by years and listed in chronological order.