Awesome Web Components

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.

Introduction

An Introduction to Web Components
Intro to Web Components
The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM
The Motivation For Using Web Components, an Introduction
The Power of Web Components
Web Components 101
Web Components: From the orbital height
What are browser-native web components?
Why Web Components?

Standards

Custom Elements

Custom Elements provide a way for authors to build their own fully-featured DOM elements.

A Guide to Custom Elements for React Developers
All about HTML Custom Elements
Custom elements
Custom Elements v1: Reusable Web Components
Handling properties in custom element upgrades
Handy Custom Elements' Patterns
HTML Living Standard: Custom elements
MDN - Using Custom Elements
web-platform-tests

Shadow DOM

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.

A complete guide on shadow DOM and event propagation
DOM Living Standard: Shadow tree
MDN - Using Shadow DOM
Mind the document.activeElement!
Open vs. Closed Shadow DOM
Shadow DOM
Shadow DOM and events
Shadow DOM in depth
Shadow DOM slots, composition
Shadow DOM styling
Shadow DOM v1: Self-Contained Web Components
The Rise of Shadow DOM
Understanding Slot Updates with Web Components
What is the Shadow DOM?
Who doesn't love some slots?
Your Content in Shadow DOM Portals
web-platform-tests

HTML Templates

<template> element is used to declare fragments of HTML that can be cloned and inserted in the document by script.

Crafting Reusable HTML Templates
HTML Living Standard: The template element
HTML templates with vanilla JavaScript
MDN - <template>: The Content Template element
MDN - Using templates and slots
Template element
Templating in HTML
The HTML5 template element
Understanding The Template Element In HTML
web-platform-tests

CSS Shadow Parts

CSS Shadow Parts allow developers to expose certain elements inside Shadow DOM for styling purposes.

W3C First Public Working Draft
CSS Shadow Parts are coming!
MDN - ::part() CSS pseudo element
MDN - part global attribute
::part and ::theme, an ::explainer
web-platform-tests

Guides

Accessibility

Accessibility for Web Components
Accessibility with ID Referencing and Shadow DOM
Dialogs and shadow DOM: can we make it accessible?
How to Make Accessible Web Components — a Brief Guide
Managing focus in the shadow DOM
The future of accessibility for custom elements
The Guide to Accessible Web Components
Web Components and the Accessibility Object model (AOM)
Web Components punch list
Web components still need to be accessible

Best Practices

Custom Element Best Practices
Developing Components: Publishing
Gold Standard Checklist for Web Components
Guidelines for creating web platform compatible components
How to Publish Web Components to NPM
Open Web Components Recommendations

Codelabs

Build a Story Web Component with LitElement
Building Custom Elements with Web Components for the 2020 Elections
Creating Custom Form Controls with ElementInternals
From Web Component to Lit Element
HowTo Components –<howto-checkbox>
HowTo Components –<howto-tabs>
HowTo Components – <howto-tooltip>
Lit: basics
Lit: intermediate
Lit for React Developers
Web Components: basics

Examples

generic-components - Collection of generic web components with a focus on accessibility, and ease of use.
howto-components - Collection of web components that implement common web UI patterns.
Nude UI - Collection of accessible, customizable, ultra-light web components.
open-wc code examples - Collection of best practices and design patterns for developing web components.
vanilla-retro-js - Vanilla JS UI component library of HTML deprecated tags.
web-components-examples - Series of web components examples, related to the MDN web components documentation.

Articles

Architecture

A deep analysis into isomorphic, autonomous cross-framework usage #MicroFrontends
Frankenstein Migration: Framework-Agnostic Approach (Part 1)
Frankenstein Migration: Framework-Agnostic Approach (Part 2)
Generating Config driven Dynamic Forms using Web Components
Hiding internal framework methods and properties from web component APIs
How to deliver Custom Elements
Making Web Components for Different Contexts
Supporting both automatic and manual registration of custom elements
Web Components — the right way

Interoperability

Advanced Tooling for Web Components
Custom Elements Everywhere
Custom Elements That Work Anywhere
JavaScript frameworks, meet Web Components
Web Components aren't a framework replacement - they're better than that
Web Components: Seamlessly interoperable

Limitations

Beyond the polyfills: how Web Components affect us today?
Custom elements, shadow DOM and implicit form submission
Form-associated custom elements
You might not need shadow DOM

Styling

Does shadow DOM improve style performance?
Eschewing Shadow DOM
How Nordhealth uses Custom Properties in Web Components
Options for styling web components
Style scoping versus shadow DOM: which is fastest?
Styling a Web Component
Styling in the Shadow DOM With CSS Shadow Parts
Thinking Through Styling Options for Web Components
Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think
Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements

Real World

Case Studies

Apple Just Shipped Web Components to Production and You Probably Missed It
Bringing Order to Web Design Chaos (with Web Components)
Get moving with Microsoft’s FAST web components
How Web Components Are Used at GitHub and Salesforce
How we use Web Components at GitHub
Implementing a Design Language System with Stencil.js
ING ❤ Web Components
ING Open-Sources Lion, Its White-Label Web Component Library – Q&A with Thomas Allmer
Lessons Learned, making our app with Web Components
Looking back on five years of web components
Shipping Web Components in 2020
The Firefox UI is now built with Web Components
Using web components to encapsulate CSS and resolve design system conflicts
Web Components at GitHub - Web Components SF Meetup
Web Components at Scale at Salesforce: Challenges Encountered, Lessons Learnt
Web Development At Scale: Composable Applications With Web Components
web.dev engineering blog #1: How we build the site and use Web Components

Components

<api-viewer> - API documentation and live playground for Web Components.
<chess-board> - Standalone chess board web component.
<css-doodle> - Web component for drawing patterns with CSS.
<dark-mode-toggle> - Custom element that allows to create a dark mode toggle or switch.
<emoji-picker> - Lightweight emoji picker, distributed as a web component.
<fg-modal> - Accessible modal dialog web component.
<file-viewer> - Web component built with Svelte to view files.
<json-viewer> - Web component to visualize JSON data in a tree view.
<lite-youtube> - Lite YouTube embed with a focus on visual performance.
<midi-player> - MIDI file player and visualizer web components.
<model-viewer> - Web component for rendering interactive 3D models.
<player-x> - Media player web component.
<progressive-image> - Custom element to progressively enhance image placeholders.
<range-slider> - Accessible range slider custom element with keyboard support.
<rapi-doc> - Web component for creating documentation from OpenAPI Specification.
<shader-doodle> - Web component for writing and rendering shaders.
<theme-switch> - Animated toggle button to switch between light, dark, and system theme.
<trix-editor> - Rich text editor custom element for everyday writing.
<vime-player> - Customizable, extensible, accessible and framework agnostic media player.
<web-vitals> - Bring web vitals quickly into your page using custom elements.

Component Libraries

AMP - Web component framework for easily creating user-first websites, stories, ads, emails and more.
Apollo Elements - Custom elements for using Apollo GraphQL with various web components libraries.
AXA Pattern Library - AXA CH UI components library built with Web Components.
Blackstone UI - Web components for creating interfaces by Blackstone Publishing.
Blaze UI Atoms - Set of web components powered by Blaze CSS.
Brightspace UI core - Collection of web components for building Brightspace applications.
Clever components - Collection of Web Components made by Clever Cloud.
Curvenote - Web components for creating interactive scientific articles.
DataFormsJS - Standalone Components for SPA routing, displaying data from web services, and more.
Dile Components - General use Web Components for websites and applications.
elements-sk - Collection of custom elements for "a la carte" web development.
github-elements - GitHub's Web Component collection.
Elix - High-quality, customizable web components for common user interface patterns.
Furo Webcomponents - Enterprise ready set of web components which work best with Eclipse Furo.
Fusion Web Components - Ser of web components used by Equinor Fusion.
Ignite UI Web Components - Complete library of UI components from Infragistics.
Immersive Custom Elements - Set of web components for embedding immersive (VR & AR) content.
Joomla UI custom elements - Compilation of Joomla 4 Custom Elements.
Ketch.UP - Web components library for Sme.UP.
Lion Web Components - Set of highly performant, accessible and flexible Web Components.
LRNWebComponents - ELMS:LN produced web components for any project.
Lume - Custom elements for defining 2D or 3D scenes rendered with CSS3D or WebGL.
Medblocks UI - Web Components for rapid development of openEHR and FHIR systems.
Microsoft Graph Toolkit - Collection of web components for the Microsoft Graph.
Mutation testing elements - A schema for mutation testing results with the web components to visualize it.
Nightingale - Data visualisation web components for the life sciences.
Nuxeo Elements - Components for building web applications with Nuxeo using Web Components.
One Platform Components - Set of web components for Red Hat One Platform.
Open Business Application Platform Web Components - Collection of web components designed for business applications.
Pixano Elements - Re-usable web components dedicated to data annotation tasks.
Playground Elements - Serverless code experiences with web components.
Shoelace - A forward-thinking library of web components.
Smart Web Components - Web components for business applications.
Stripe Elements - Custom Element Wrapper for Stripe.js v3 Elements.
TEI Publisher Components - Collection of web components used by TEI Publisher and apps generated by it.
Titanium Elements - Collection of lightweight web components used by Leavitt Group Enterprises.
Tradeshift Elements - Reusable Tradeshift UI Components as Web Components.
Umbraco UI Components - Collection of user interface web components for Umbraco CMS.
Vaadin components - Evolving set of high-quality web components for building business web applications.
VSCode Webview Elements - Components for creating VSCode extensions which use the Webview API.
Warp View - Collection of charting web components for Warp 10.
Webmarkets web components - Set of Webmarkets' public web components.
Wired Elements - Set of common UI elements with a hand-drawn, sketchy look.
Wokwi Elements - Web Components for Arduino and various electronic parts.
XWeather - Collection of web components implementing portions of the OpenWeatherMap API.

Design Systems

Astro Space UX Design System - Set of components to build rich space app experiences with established interaction patterns.
Auro Design System - Alaska Airlines design system to innovate on ideas and collaborate on the future.
Blueprint UI - Web Component based design system with flexible and lightweight components.
Bolt Design System - Twig and Web Component-powered UI components, reusable visual styles and tooling.
Calcite Components - Shared Web Components for Esri's Calcite design framework.
Carbon Web Components - Carbon Design System variant on top of Web Components.
Clarity Core Web Components - Suite of web components from the Clarity Design System.
Crayons - Collection of web components that adheres to the Freshworks Design System.
FAST Components - Library of Web Components based on the FAST design language.
Fluent UI Web Components - Library of Web Components that supports Microsoft's Fluent design language.
Forge Components - Library of Web Components adhering to the Forge Design System.
GOV.UK Web Components - Set of encapsulated web components consuming the GOV.UK Design System.
Helix UI - Web Component library for the Helix Design System.
Liquid - UI component library based on the Liquid Design System.
Lyne Components - Building blocks of the Lyne Design System are based on Web Components.
Material Web Components - Material Design implemented as Web Components.
Momentum UI Web Components - Set of UI components based on Momentum Design.
Nord - Nordhealth’s design system for products, digital experiences and brand.
NuML | NUDE Elements - HTML Framework and Design System based on Web Components and runtime CSS generation.
OutlineJS - Web component based design system starter kit.
PatternFly Elements - Collection of flexible and lightweight Web Components based on the Unified Design Kit.
Pharos Design System - JSTOR's design system to create cohesive, supportive, and beautiful experiences.
Red Hat Design System - Web components for building uniform experiences with the Red Hat brand.
Siemens iX Web Components - Web Components implementing Siemens iX design system.
Spectrum Web Components - Adobe Spectrum design language implementation built with Web Components.
UI5 Web Components - Set of reusable UI elements implementing SAP Fiori Design Guidelines.
U-M Library Design System - University of Michigan Library Design System.
Zooplus web components - Set of web components that implement Z+ shop style guide.

Use Cases

How we chose to build our Design System using StencilJS Web Components
How searching for a bundle-free React led me to web components
Reasons Web Components are perfect for a big company
5 Reasons Web Components Are Perfect for Design Systems
Web components: the secret ingredient helping power the web
Web Components for Enterprise. Part 1: Salesforce, Oracle, SAP
Web Components for Enterprise. Part 2: Nuxeo, Ionic, Vaadin
Why I use Web Components - My use cases
Why we use Web Components by @viljamis
Why we use Web Components by @maxlynch

Libraries

Class Based

DNA - Progressive Web Components library.
element-js - Simple and lightweight base classes for web components with a beautiful API.
FAST Element - Lightweight library for building performant, memory-efficient, standards-compliant Web Components.
Forge Core - Building blocks and utilities that are used when building Forge Web Components.
Joist - Set of small libraries designed to add the bare minimum to web components to make you productive.
Lit - Simple library for building fast, lightweight web components.
Lightning Web Components - blazing fast, enterprise-grade Web Components foundation.
Omi - Next generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating).
Panel - Web Components + Virtual DOM: web standards for powerful UIs.
slim.js - Fast & Robust Front-End Micro-framework based on modern standards.
Stencil - Compiler for generating Web Components.
Tonic - Minimalist, stable, audit friendly component framework.

Functional

atomico - Small library for the creation of interfaces based on web components using functions and hooks.
haunted - React's Hooks API implemented for web components.
hybrids - UI library for creating Web Components with simple and functional API.
Solid Element - Library that extends Solid adding Custom Web Components and extensions.

Integrations

ember-custom-elements - Render Ember and Glimmer components using custom elements.
preact-custom-element - Generate/register a custom element from a preact component.
@adobe/react-webcomponent - Automate the wrapping of a React component in a custom element.
nuxt-custom-elements - Export your project components as custom elements for integration into external pages.
react-shadow - Utilise Shadow DOM in React with all the benefits of style encapsulation.
reactify-wc - Use web components with React properties and functions.
remount - Mount React components to the DOM using custom elements.
@riotjs/custom-elements - Simple API to create vanilla custom elements with Riot.js.

Benchmarks

All the Ways to Make a Web Component
web-components-benchmark - Benchmark Web Components technologies with various examples.
web-components-todo - The same todo application built in different Web Components libraries for benchmark purpose.

Frameworks

Angular

Angular Elements Overview
Building and consuming Angular Elements as Web Components
How to use Angular ngModel and ngForms with WebComponents
Using Web Components in Angular
Web Components With Angular Ivy In 6 Steps

React

3 Approaches to Integrate React with Custom Elements
Building Interoperable Web Components That Even Work With React
Rendering React Components With Custom Elements
How to use Web Components in React
Using Web Components With Next (or Any SSR Framework)

Vue

Using Web Components in Vue

Svelte

Svelte Custom Element API
How to Create a Web Component in Svelte
Svelte Web Component — 5.4KB

Ecosystem

Meta Frameworks

AMP - Web component framework to easily create user-first experiences for the web.
Enhance - Web standards-based HTML framework for building lightweight web applications.
luna-js - SSR framework that makes working with the WebComponents standard a breeze.
Rocket - Modern web setup for static sites with a sprinkle of JavaScript.
Web Components Compiler - Compiler to make server-side rendering of native web components easier.
WebC - Framework-independent standalone HTML serializer for generating markup for web components.

Starter Kits

Create Open Web Components - Web component project scaffolding.
custom-element-boilerplate - Boilerplate for creating a custom element.
hello-web-components - Simple starter hello world web component written in TypeScript.
nutmeg - Build, test, and publish vanilla Web Components with a little spice.

Testing Solutions

capybara-shadowdom - Ruby gem that adds basic support for the Shadow DOM to Capybara.
Cypress component tests for Lit - How to run component tests for a Lit web component with Cypress.
cypress-lit - Test your Lit elements and native web components in Cypress with all the modern browsers.
Developing Components: Testing - Using @web/test-runner for testing web components in a real browser.
How To Automate Shadow DOM In Selenium WebDriver - Locating Shadow DOM elements using Selenium WebDriver in a Maven project.
Native Automation support for Shadow DOM - Shadow DOM and open-source testing frameworks.
Open Web Components: Testing - Opinionated package that combines and configures testing libraries.
query-selector-shadow-dom - querySelector that can pierce Shadow DOM roots, useful for automated testing.
shadow-automation-selenium - Shadow DOM automation using Selenium.
Testing Shadow DOM elements in Selenium - In Selenium 4, there is now a way to access Shadow DOM nodes.
Test web components with Playwright - So you’ve created a native web component or two. How do you test them in popular browsers?
W3C Webdriver conquering automation of Shadow DOM - Shadow DOM tree and its interaction with the W3C Webdriver.

Tools

Backlight — With collaboration between developers and designers at heart, Backlight is a very complete coding platform where teams build, document, publish, scale and maintain Design Systems.
Custom Elements Locator - Chrome extension to find custom elements on a page.
@storybook/web-components - UI development environment for plain web-component snippets.
webcomponents.dev - Component IDE for web platform developers.
web-component-analyzer - CLI that analyzes web components and emits documentation / diagnostics.
Web Components Codemods - Codemods for Web Components.

Books

Web Components in Action - Book by Ben Farrell, available at Manning early release program.
Web Component Essentials - Book by Cory Rylan, early preview edition available at Leanpub.

Tutorials

Building Web Components with Vanilla JavaScript
Creating a Custom Element from Scratch
Creating a Reusable Avatar Web Component
Creating Web Components with Stencil
Encapsulating Style and Structure with Shadow DOM
Getting started with LitElement and TypeScript
Web Components: from zero to hero
Deep Dive: Web Components & Dependency Injection – The Experiment
Handling data with Web Components
How to use D3js with WebComponents
Navigation Lifecycle using Vaadin Router, LitElement and TypeScript
Recreating The Arduino Pushbutton Using SVG And <lit-element>
Routing Management with LitElement and TypeScript
Snake-Eating Game Making with Web Components of Omi and MVP Architecture
Stencil – Web Components On Steroids
Using Modern Web Components
Using Web Components in WordPress is Easier Than You Think
Web Components 101: Framework Comparison
Web Components 101: Lit Framework
Web Components Tools: A Comparison
Where to begin building Web Components? - The Basics
Where to begin building Web Components? - Class-based Libraries

Insights

Podcasts

Code[ish], episode 38: Building with Web Components
Frontend Happy Hour, episode 62: Web Components - shots of shadow DOM
Labs Talk - Web Components with Peter Muessig
Real Talk JavaScript, episode 7: Custom Web Components with Rob Wormald
Real Talk JavaScript, episode 101: Back to Basics with Native HTML and LitElement

Presentations

Are Web Components the Betamax of web development? by @lostinbrittany
Designing Standard Systems by @stefsull and @bferrua
Frontend Architecture for Scalable Design Systems by @salem_cobalt
lit-apollo: Data-Driven Components that Use the Platform by @PowersBenny
Mastering Shadow DOM by @Martine_Dowden
Modernizing Large Frontends with Web Components by @samjulien
Shadow DOM: off the beaten track by @serhiikulykov
Using Web Components to Build a Framework-agnostic UI Library by @brianbouril and @danciupuliga
Web Components and the AOM by @LeonieWatson
Web Components and Styles Scoping by @bashmish
Web Components can do that?! by @vogloblinsky
Web Components: Introduction and State of the Art by @webcomp_dev

Talks

Better Apps: Delivering Universal UI Patterns as Web Components by @janmiksovsky
Custom Web Shadow Elements, or Whatever… by @aerotwist
Styling and Theming Web Components by @justinfagnani
Web Components at Enterprise Scale by @diervo

Usage Metrics

Chrome Platform Status: CustomElementRegistryDefine
Chrome Platform Status: ElementAttachShadow
Chrome Platform Status: HTMLTemplateElement

Proposals

Form-associated Custom Elements

Form Participation API Explained - Document by Google Chrome team.
Form-associated custom elements - Feature in Chrome platform status.
web-platform-tests

Constructable Stylesheet Objects

Specification Draft
web-platform-tests
Explainer
Constructable Stylesheets - Feature in Chrome platform status.

Custom State Pseudo Class

Blink: Intent to implement
ElementInternals's states property and the :state() pseudo class

Miscellaneous

bruck - Prototyping system built with web components and the Houdini Paint API.
Vaadin Directory - Publish, discuss and rate web components
webcomponents.org - Discuss & share web components.

Who To Follow

Polymer	Stencil	open-wc.org	webcomponents.dev
Justin Fagnani	Viljami Salminen	Jan Miksovsky	Serhii Kulykov

Maintainers

Created by @mateusortiz in 2014.
Maintained by @web-padawan since 2018.

Files

README.md

Latest commit

History