Design Systems

• Carbon Web Components (⭐295) - Carbon Design System variant on top of Web Components.

Component Libraries

• seele (⭐18) - An extensible Web Components library, with Material Design 3 components pre-provided.

Shadow DOM

• The Shadow DOM Explained: Achieving True Encapsulation in Web Components

Accessibility

• How Shadow DOM and accessibility are in conflict

• Shadow DOM Focus Delegation: Getting delegatesFocus Right

• Web Components and accessibility

Usage Patterns

• Managing event listeners in custom elements

Interoperability

• JavaScript frameworks, meet Web Components

Opinions

• Liskov's Gun: The parallel evolution of React and Web Components

• Web Components are not Framework Components — and That’s Okay

• HTML Web Components by Jim Nielsen

• HTML Web Components by Jeremy Keith

Case Studies

• Under the hood of MDN's new frontend

Component Libraries

• Morpheus (⭐29) - An experimental web components UI kit.

• Snice - Comprehensive and full-featured component library and web component design system.

Design Systems

• PIE Design System - Just Eat Takeaway.com’s global design system

• Porsche Design System - Toolkit for creating web applications based on Web Components.

Use Cases

• Post Mortem: Rewriting AgnosticUI with Lit Web Components

Class Based

• Snice - Elegant decorators for building web components declaratively or imperatively.

• Stencil (⭐13k) - Compiler for generating Web Components.

Functional

• pion (⭐82) - React's Hooks API for web components with lit-html.

Tutorials

• The Missing Link for Web Components

Podcasts

• ShopTalk Show, episode 657: David Darnes on Web Components and Design Systems

History / 2016

• Demythstifying Web Components

• Web Component Challenges

• Why web components are so important

History / 2015

• Microsoft Edge and Web Components

History / 2014

• Building an Accessible Disclosure Button – using Web Components

History / 2012

• Notes on Web Components + ARIA

Introduction

• Intro to Web Components

• Why Web Components?

CSS Shadow Parts

• CSS shadow parts

• web-platform-tests (⭐6.2k)

Form Associated Custom Elements

• HTML Living Standard: Creating a form-associated custom element

• Form-Associated Custom Elements: Web Components That Belong in a Form

• Form-Associated Custom Elements in Practice

• ElementInternals and Form-Associated Custom Elements

Accessibility

• Accessibility for Web Components

Opinions

• Web components are okay

• Web Components Are Not the Future — They’re the Present

• Web Components Are Not the Future

• If Web Components are so great, why am I not using them?

• Debunking Web Component Myths and Misconceptions

• Let’s talk about web components

• A Web Component Story

• Why it’s okay for web components to use frameworks

• Misadventures in web components

• What happened to web components?

• The Failed Criticism of Web Components

• The failed promise of Web Components

• The Flaws Of Web Components (And Possible Solutions)

• The Perks Of Web Components

• There’s No Need To Hate Web Components

• Why I don't use web components

• The Web Components journey: wrong ways, lacking parts and promising paths

Component Libraries

• VSCode Elements (⭐458) - Web component library for developing Visual Studio Code extensions.

• Web Awesome (⭐1.3k) - Open source library of web components from Font Awesome.

Design Systems

• Calcite Design System (⭐373) - Web Components for Esri's Calcite design framework.

• Lyne Components (⭐66) - Building blocks of the Lyne Design System are based on Web Components.

• Momentum UI Web Components (⭐214) - Set of UI components based on Momentum Design.

• Nessie Design System - Web components by NS Dutch Railways for consumer (external) applications.

• Nucleus design system - Standardised set of reusable components for British Gas.

• Polaris web components - Native UI elements that follow Shopify's design system.

• Tractie — NS Design System - Web components by NS Dutch Railways for employee internal applications.

• UI5 Web Components (⭐1.8k) - Set of reusable UI elements implementing SAP Fiori Design Guidelines.

Use Cases

• Why we use Web Components

Class Based

• FAST Element (⭐9.7k) - Lightweight library for building performant, memory-efficient, standards-compliant Web Components.

Benchmarks

• web-components-todo (⭐419) - The same todo application built in different Web Components libraries for benchmark purpose.

Angular

• Web Components in Angular: Integrating React Components Across Framework Boundaries

• Web Components in Angular - Why Passing Inputs Breaks on Navigation

• Angular Elements Overview

• Building and consuming Angular Elements as Web Components

Svelte

• Svelte Custom Element API

Tools

• Custom Elements Manifest - Codegen for Web Components.

• @web/storybook-builder - Storybook builder with support for Web Components.

Tutorials

• Getting started with LitElement and TypeScript

• Web Components Tools: A Comparison

Podcasts

• Code[ish], episode 38: Building with Web Components

• JSJ 424: UI5 and 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

• Frontend Architecture for Scalable Design Systems by @salem_cobalt

• Mastering Shadow DOM by @Martine_Dowden

History / 2017

• 2017-05-04 Make a Native Web Component with Custom Elements v1 and Shadow DOM v1

• 2017-03-16 The broken promise of Web Components

• 2017-03-16 Regarding the broken promise of Web Components

Components

• <aura-router> - HTML-first client-side router web component.

Component Libraries

• PlayCanvas Web Components (⭐110) - Custom elements for building 3D interactive web apps with the PlayCanvas Engine.

Components

• <phantom-ui> - Skeleton loader that measures your real DOM to render matching shimmer placeholders.

Books

• Web Component Development with Modern Libraries and Tooling - Book by Mark Volkmann, available at Manning early access program.

Design Systems

• NVIDIA Elements (⭐88) - The Design Language and UI Agent Harness for AI/ML Factories, Robotics, and Autonomous Vehicles.

Component Libraries

• Burnish Components (⭐2) - Web components for rendering MCP tool-call output as UI.

Components

• <notectl-editor> - Modern rich text editor with plugin architecture, immutable state, and zero-config framework-agnostic deployment.

• <pdfjs-viewer-element> - Custom element that embeds PDF.js default viewer.

Component Libraries

• AgnosticUI (⭐825) - A CLI-based UI component library that copies Lit web components directly into your project. Full React and Vue wrappers for native framework experience.

Functional

• Elemento (⭐7) - A lightweight library for building functional web components using signals and Lit.

Class Based

• Lume Element (⭐187) - Write custom elements with reactivity and templating powered by Solid.js signals and effects.

• ReadyMade (⭐68) - Write custom element classes with decorators. No dependencies.

Class Based

• WebCell (⭐177) - Web Components engine based on VDOM, JSX, MobX & TypeScript.

Component Libraries

• AnywhereUI (⭐38) - Collection of rich web components that includes framework bindings. Created with StencilJS.

Components

• <qr-code> – Web component for rendering customizable, animate-able, SVG-based QR codes.

Component Libraries

• LDRS (⭐2.2k) - Lightweight, customizable loading animations/spinners.

• TrendChart Elements (⭐64) - Components to generate simple, light and responsive charts.

Components

• <active-table> - Editable table web component.

• <deep-chat> - Web component for chat with AI capabilities.

Design Systems

• Blueprint UI - Web Component based design system with flexible and lightweight components.

Introduction

• The Motivation For Using Web Components, an Introduction

• Web Components: From the orbital height

Custom Elements

• Custom elements

• Handling properties in custom element upgrades

Shadow DOM

• A complete guide on shadow DOM and event propagation

• Mind the document.activeElement!

• Shadow DOM

• Shadow DOM and events

• Shadow DOM slots, composition

• Shadow DOM styling

HTML Templates

• Crafting Reusable HTML Templates

• HTML templates with vanilla JavaScript

• Template element

• Templating in HTML

• The HTML5 template element

• Understanding The Template Element In HTML

Usage Patterns

• Who doesn't love some slots?

• Your Content in Shadow DOM Portals

Codelabs

• HowTo Components –<howto-checkbox>

• HowTo Components –<howto-tabs>

• HowTo Components – <howto-tooltip>

• Lit: basics

• Lit: intermediate

• Lit for React Developers

• Web Components: basics

Interoperability

• Advanced Tooling for Web Components

Class Based

• element-js (⭐30) - Simple and lightweight base classes for web components with a beautiful API.

Meta Frameworks

• Enhance - Web standards-based HTML framework for building lightweight web applications.

• luna-js (⭐10) - 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 (⭐126) - Compiler to make server-side rendering of native web components easier.

• WebC (⭐1.4k) - Framework-independent standalone HTML serializer for generating markup for web components.

Testing Solutions

• capybara-shadowdom (⭐15) - 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 (⭐25) - 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 (⭐260) - querySelector that can pierce Shadow DOM roots, useful for automated testing.

• 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.

Tutorials

• Creating a Custom Element from Scratch

• Encapsulating Style and Structure with Shadow DOM

• Web Components: from zero to hero

• Deep Dive: Web Components & Dependency Injection – The Experiment

• 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

• Where to begin building Web Components? - The Basics

• Where to begin building Web Components? - Class-based Libraries

Components

• <theme-switch> - Animated toggle button to switch between light, dark, and system theme.

Maintainers / 2011

• Created by @mateusortiz in 2014.

• Maintained by @web-padawan since 2018.

Introduction

• What are browser-native web components?

Accessibility

• Accessibility with ID Referencing and Shadow DOM

History / 2019

• 2019-09-02 Web Components for Cross-Framework Component Libraries

• 2019-07-01 Web Components in 2019: Part 4

• 2019-06-30 Web Components in 2019: Part 3

• 2019-06-30 Web Components in 2019: Part 2

• 2019-06-29 Web Components in 2019: Part 1

• 2019-03-18 An Introduction to Web Components

• 2019-02-05 Developments in Web Components I’m excited about in 2019

History / 2018

• 2018-07-06 Web Components in 2018

History / 2017

• 2017-08-23 Web Components: Just in the Nick of Time (Polymer Summit 2017)

• 2017-08-23 Using Web Components in Ionic (Polymer Summit 2017)

• 2017-08-23 Web Components for VR (Polymer Summit 2017)

• 2017-08-22 Building UI at Enterprise Scale with Web Components (Polymer Summit 2017)

• 2017-08-22 Custom Elements Everywhere (Polymer Summit 2017)

• 2017-08-22 Evolving the Next Generation of Polymer Elements (Polymer Summit 2017)

• 2017-08-22 Polymer @ YouTube (Polymer Summit 2017)

• 2017-08-22 Web Components for CMS (Polymer Summit 2017)

• 2017-01-10 Web Components v1 - the next generation

History / 2016

• Extensible web components

• Web Components and progressive enhancement

• Update on standardizing Shadow DOM and Custom Elements

History / 2015

• There is an Element for that

• What happened to Web Components?

• Why Web Components will make the web a better place for our users

• Practical Questions around Web Components

History / 2014

• A No-Nonsense Guide to Web Components, Part 1: The Specs

• A No-Nonsense Guide to Web Components, Part 2: Practical Use

• Web Components + Backbone: A Game-Changing Combination

• Server-less applications powered by Web Components

• Web Components and the Future of CSS

• Easy composition and reuse with Web Components

• Let’s build some apps with Polymer!

• Polymer: State of the Union

• Web Components 101: An Introduction to Fundamental Changes in HTML

• Web Components 201: Designing Web Components for Reuse

• Why Web Components — Does the Web Really Need Another Component?

• “Don’t stop thinking about tomorrow” - AngularJS and Web Components

• Multi-device Apps with Web Components

• As I Walk Through The Valley Of The Shadow Of DOM

• Accessibility of Web Components

• Componentize The Web: Back To The Browser!

• Google I/O 2014 - Polymer and the Web Components revolution

• Google I/O 2014 - Polymer and Web Components change everything you know about Web development

• Google I/O 2014 - Unlock the next era of UI development with Polymer

• Making Polymer Elements Accessible

• The Road to Web Components

• The Web Components Revolution is Here

• Web Components: A chance to create the future

• Web Component Mashups at 3 a.m.

• Web Components Tools & Libraries

• Web Components Can Do That?!

• HTML as Custom Elements (⭐263)

• Using Polymer to Create Web Components

History / 2013

• A future called Web Components

• Building Mobile Web Applications With Brick

• Polymer: declarative, encapsulated, and reusable components for the web

• Web Components: Why you're already an expert

• Yo Polymer: a new way of building web apps

• Web Components Revolution

• Return of Inspector Web: Web Components a Year Later

• Working with Custom Elements

• Breaking Development: Web Components

• Web Components: A Tectonic Shift for Web Development - Google I/O 2013

• Shadow DOM 101

• Shadow DOM 201

• Shadow DOM 301

• Visualizing shadow DOM concepts

• Web components and the future of web development

• HTML's New Template Tag

History / 2012

• Google I/O 2012 - The Web Platform's Cutting Edge

Design Systems

• Astro Space UX Design System (⭐156) - 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.

• Nord - Nordhealth’s design system for products, digital experiences and brand.

History / 2018

• 2018-08-19 6 Reasons You Should Use Native Web Components

• 2018-04-17 Extending Native DOM Elements with Web Components

History / 2016

• What's New in Shadow DOM v1 (by examples)

History / 2014

• Why Web Components Are Ready For Production

• An Addendum to Why Web Components Aren't Ready for Production Yet

• Why Web Components Aren't Ready for Production... Yet

• Component Interop With React And Custom Elements

Custom Elements

• Custom Elements v1: Reusable Web Components

Shadow DOM

• Shadow DOM v1: Self-Contained Web Components

Accessibility

• Dialogs and shadow DOM: can we make it accessible?

• Managing focus in the shadow DOM

Best Practices

• Custom Element Best Practices

Codelabs

• Creating Custom Form Controls with ElementInternals

Examples

• Nude UI (⭐235) - Collection of accessible, customizable, ultra-light web components.

Styling

• Does shadow DOM improve style performance?

• Eschewing Shadow DOM

• How Nordhealth uses Custom Properties in Web Components

• Style scoping versus shadow DOM: which is fastest?

• Web Component Pseudo-Classes and Pseudo-Elements are Easier Than You Think

Component Libraries

• AXA Pattern Library (⭐130) - AXA CH UI components library built with Web Components.

• Curvenote (⭐200) - Web components for creating interactive scientific articles.

• Dile Components (⭐106) - General use Web Components for websites and applications.

• Furo Webcomponents (⭐11) - Enterprise ready set of web components which work best with Eclipse Furo.

• Fusion Web Components (⭐13) - Ser of web components used by Equinor Fusion.

• Ignite UI Web Components (⭐170) - Complete library of UI components from Infragistics.

• Medblocks UI (⭐74) - Web Components for rapid development of openEHR and FHIR systems.

• Mutation testing elements (⭐29) - A schema for mutation testing results with the web components to visualize it.

• One Platform Components (⭐34) - Set of web components for Red Hat One Platform.

• Playground Elements (⭐648) - Serverless code experiences with web components.

• Stripe Elements (⭐84) - Custom Element Wrapper for Stripe.js v3 Elements.

• Titanium Elements (⭐20) - Collection of lightweight web components used by Leavitt Group Enterprises.

• Umbraco UI Components (⭐152) - Collection of user interface web components for Umbraco CMS.

• Webmarkets web components (⭐1) - Set of Webmarkets' public web components.

Design Systems

• Forge Components (⭐71) - Library of Web Components adhering to the Forge Design System.

• Liquid (⭐88) - UI component library based on the Liquid Design System.

• Material Web Components (⭐11k) - Material Design implemented as Web Components.

• OutlineJS (⭐131) - Web component based design system starter kit.

• Pharos Design System (⭐132) - JSTOR's design system to create cohesive, supportive, and beautiful experiences.

• Red Hat Design System (⭐152) - Web components for building uniform experiences with the Red Hat brand.

• Siemens iX Web Components (⭐376) - Web Components implementing Siemens iX design system.

Class Based

• Joist (⭐134) - 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.

Functional

• Solid Element (⭐36k) - Library that extends Solid adding Custom Web Components and extensions.

Integrations

• nuxt-custom-elements (⭐83) - Export your project components as custom elements for integration into external pages.

React

• 3 Approaches to Integrate React with Custom Elements

• Building Interoperable Web Components That Even Work With React

• Using Web Components With Next (or Any SSR Framework)

Accessibility

• Web Components punch list

Examples

• open-wc code examples - Collection of best practices and design patterns for developing web components.

Introduction

• Web Components 101

Case Studies

• Get moving with Microsoft’s FAST web components

Case Studies

• How we use Web Components at GitHub

• Using web components to encapsulate CSS and resolve design system conflicts

Component Libraries

• github-elements (⭐2.9k) - GitHub's Web Component collection.

• Vaadin components (⭐582) - Evolving set of high-quality web components for building business web applications.

Case Studies

• How Web Components Are Used at GitHub and Salesforce

Usage Patterns

• Handy Custom Elements' Patterns

Codelabs

• From Web Component to Lit Element

Styling

• Options for styling web components

Best Practices

• Developing Components: Publishing

Starter Kits

• Create Open Web Components - Web component project scaffolding.

Components

• <player-x> - Media player web component.

• <vime-player> - Customizable, extensible, accessible and framework agnostic media player.

Component Libraries

• Joomla UI custom elements (⭐31) - Compilation of Joomla 4 Custom Elements.

Shadow DOM

• Understanding Slot Updates with Web Components

Case Studies

• Web Components at GitHub - Web Components SF Meetup

Components

• <fg-modal> - Accessible modal dialog web component.

Design Systems

• Fluent UI Web Components (⭐20k) - Library of Web Components that supports Microsoft's Fluent design language.

Use Cases

• How searching for a bundle-free React led me to web components

Case Studies

• Web Development At Scale: Composable Applications With 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.

• <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.

• <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.

• <trix-editor> - Rich text editor custom element for everyday writing.

• <web-vitals> - Bring web vitals (⭐8.6k) quickly into your page using custom elements.

Class Based

• Panel (⭐274) - Web Components + Virtual DOM: web standards for powerful UIs.

Tutorials

• Creating a Reusable Avatar Web Component

Component Libraries

• Smart Web Components (⭐484) - Web components for business applications.

Tools

• Custom Elements Locator (⭐38) - Chrome extension to find custom elements on a page.

• @storybook/web-components - UI development environment for plain web-component snippets.

Integrations

• reactify-wc (⭐178) - Use web components with React properties and functions.

Component Libraries

• Ketch.UP (⭐11) - Web components library for Sme.UP.

• Open Business Application Platform Web Components (⭐14) - Collection of web components designed for business applications.

Integrations

• @adobe/react-webcomponent (⭐104) - Automate the wrapping of a React component in a custom element.

Tools

• Web Components Codemods (⭐10) - Codemods for Web Components.

History / 2013

• Performance and Custom Elements

• Creating Reusable Markup with The HTML Template Element

• Working with Shadow DOM

Component Libraries

• Pixano Elements (⭐43) - Re-usable web components dedicated to data annotation tasks.

Presentations

• Shadow DOM: off the beaten track by @serhiikulykov

Limitations

• Custom elements, shadow DOM and implicit form submission

• You might not need shadow DOM

Styling

• Styling a Web Component

• Styling in the Shadow DOM With CSS Shadow Parts

• Thinking Through Styling Options for Web Components

• Web Standards Meet User-Land: Using CSS-in-JS to Style Custom Elements

Component Libraries

• XWeather (⭐7) - Collection of web components implementing portions of the OpenWeatherMap API.

History / 2019

• 2019-07-01 Form-associated custom elements

• 2019-04-09 Beyond the polyfills: how Web Components affect us today?

History / 2017

• 2017-11-20 Styling is critical to web component reuse, but may prove difficult in practice

Component Libraries

• Blaze UI Atoms (⭐1.6k) - Set of web components powered by Blaze CSS.

Benchmarks

• All the Ways to Make a Web Component

Testing Solutions

• shadow-automation-selenium (⭐117) - Shadow DOM automation using Selenium.

History / 2012

• The Basics of the Shadow DOM

Architecture

• A deep analysis into isomorphic, autonomous cross-framework usage #MicroFrontends

• Generating Config driven Dynamic Forms using Web Components

Component Libraries

• Nightingale (⭐152) - Data visualisation web components for the life sciences.

• TEI Publisher Components (⭐18) - Collection of web components used by TEI Publisher and apps generated by it.

Integrations

• ember-custom-elements (⭐15) - Render Ember and Glimmer components using custom elements.

• react-shadow (⭐1.4k) - Utilise Shadow DOM in React with all the benefits of style encapsulation.

Angular

• How to use Angular ngModel and ngForms with WebComponents

Talks

• Custom Web Shadow Elements, or Whatever… by @aerotwist

Accessibility

• How to Make Accessible Web Components — a Brief Guide

• The future of accessibility for custom elements

• The Guide to Accessible Web Components

• Web components still need to be accessible

Examples

• generic-components (⭐571) - Collection of generic web components with a focus on accessibility, and ease of use.

• howto-components (⭐873) - Collection of web components that implement common web UI patterns.

• vanilla-retro-js (⭐16) - Vanilla JS UI component library of HTML deprecated tags.

• web-components-examples (⭐3.4k) - Series of web components examples, related to the MDN web components documentation.

Architecture

• Frankenstein Migration: Framework-Agnostic Approach (Part 1)

• Frankenstein Migration: Framework-Agnostic Approach (Part 2)

• 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

Case Studies

• Looking back on five years of web components

Component Libraries

• Apollo Elements (⭐423) - Custom elements for using Apollo GraphQL with various web components libraries.

• Blackstone UI (⭐110) - Web components for creating interfaces by Blackstone Publishing.

• Lume (⭐1.5k) - Custom elements for 3D graphics. Built with Three.js for WebGL/WebGPU rendering, and Solid.js for reactivity and templating.

Design Systems

• Crayons (⭐248) - Collection of web components that adheres to the Freshworks Design System.

Starter Kits

• custom-element-boilerplate (⭐177) - Boilerplate for creating a custom element.

• hello-web-components (⭐31) - Simple starter hello world web component written in TypeScript.

• nutmeg (⭐118) - Build, test, and publish vanilla Web Components with a little spice.

Talks

• Better Apps: Delivering Universal UI Patterns as Web Components by @janmiksovsky

• Styling and Theming Web Components by @justinfagnani

• Web Components at Enterprise Scale by @diervo

History / 2019

• 2019-12-02 Web Components and the Accessibility Object model (AOM)

Interoperability

• Web Components aren't a framework replacement - they're better than that

Case Studies

• Implementing a Design Language System with Stencil.js

Meta Frameworks

• AMP (⭐15k) - Web component framework to easily create user-first experiences for the web.

Component Libraries

• Brightspace UI core (⭐79) - Collection of web components for building Brightspace applications.

• Clever components (⭐240) - Collection of Web Components made by Clever Cloud.

• DataFormsJS (⭐197) - Standalone Components for SPA routing, displaying data from web services, and more.

• Elix (⭐838) - High-quality, customizable web components for common user interface patterns.

• Lion Web Components (⭐2k) - Set of highly performant, accessible and flexible Web Components.

• LRNWebComponents (⭐274) - ELMS:LN produced web components for any project.

• Nuxeo Elements (⭐29) - Components for building web applications with Nuxeo using Web Components.

• Tradeshift Elements (⭐18) - Reusable Tradeshift UI Components as Web Components.

• Wired Elements (⭐11k) - Set of common UI elements with a hand-drawn, sketchy look.

• Wokwi Elements (⭐262) - Web Components for Arduino and various electronic parts.

Design Systems

• PatternFly Elements (⭐394) - Collection of flexible and lightweight Web Components based on the Unified Design Kit.

• Spectrum Web Components (⭐1.5k) - Adobe Spectrum design language implementation built with Web Components.

Class Based

• DNA (⭐60) - Progressive Web Components library.

Integrations

• preact-custom-element (⭐404) - Generate/register a custom element from a preact component.

Benchmarks

• web-components-benchmark - Benchmark Web Components technologies with various examples.

Presentations

• Are Web Components the Betamax of web development? by @lostinbrittany

• lit-apollo: Data-Driven Components that Use the Platform by @PowersBenny

• Modernizing Large Frontends with Web Components by @samjulien

• Using Web Components to Build a Framework-agnostic UI Library by @brianbouril and @danciupuliga

• Web Components can do that?! by @vogloblinsky

History / 2017

• 2017-12-18 ::part and ::theme, an ::explainer

Codelabs

• Building Custom Elements with Web Components for the 2020 Elections

Use Cases

• How we chose to build our Design System using StencilJS 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

React

• Rendering React Components With Custom Elements

Tutorials

• Building Web Components with Vanilla JavaScript

• Creating Web Components with Stencil

• Recreating The Arduino Pushbutton Using SVG And <lit-element>

• Snake-Eating Game Making with Web Components of Omi and MVP Architecture

History / 2018

• 2018-12-19 Styling Accessibility: A Web Components Approach

Custom Elements

• MDN - Using Custom Elements

Shadow DOM

• MDN - Using Shadow DOM

HTML Templates

• MDN - <template>: The Content Template element

• MDN - Using templates and slots

Best Practices

• How to Publish Web Components to NPM

Codelabs

• Build a Story Web Component with LitElement

Case Studies

• Apple Just Shipped Web Components to Production and You Probably Missed It

Svelte

• How to Create a Web Component in Svelte

• Svelte Web Component — 5.4KB

History / 2019

• 2019-04-08 A history of the HTML slot element

History / 2017

• 2017-06-06 An intro to web components with otters

Custom Elements

• HTML Living Standard: Custom elements

Shadow DOM

• DOM Living Standard: Shadow tree

• Shadow DOM in depth (⭐238)

• What is the Shadow DOM?

HTML Templates

• HTML Living Standard: The template element

CSS Shadow Parts

• CSS Shadow Parts are coming!

Interoperability

• Custom Elements Everywhere

Case Studies

• Bringing Order to Web Design Chaos (with Web Components)

• The Firefox UI is now built with Web Components

• web.dev engineering blog #1: How we build the site and use Web Components

React

• How to use Web Components in React

Usage Metrics

• Chrome Platform Status: CustomElementRegistryDefine

• Chrome Platform Status: ElementAttachShadow

• Chrome Platform Status: HTMLTemplateElement

Constructable Stylesheet Objects

• Specification Draft

• Explainer (⭐137)

• Constructable Stylesheets - Feature in Chrome platform status.

Custom State Pseudo Class

• Blink: Intent to implement

• ElementInternals's states property and the :state() pseudo class

Polyfills / Custom Elements polyfills

• @webcomponents/custom-elements (⭐1.2k) - Custom Elements polyfill by Polymer team.

• document-register-element (⭐1.1k) - Custom Elements polyfill by Andrea Giammarchi.

Polyfills / Customized Built-in Elements polyfills

• @corpuscule/custom-builtin-elements (⭐12) - Customized built-in elements polyfill by CorpusculeJS.

• @ungap/custom-elements-builtin (⭐103) - Customized built-in elements polyfill by ungap project.

Polyfills / Shadow DOM shims

• @webcomponents/shadydom (⭐1.2k) - ShadowDOM v1 shim.

• @webcomponents/shadycss (⭐1.2k) - ShadowDOM style encapsulation shim.

• @lwc/synthetic-shadow (⭐1.8k) - Shadow DOM polyfill by LWC.

Polyfills / HTML Templates polyfills

• @webcomponents/template (⭐1.2k) - Minimal polyfill for <template>.

• @ungap/import-node (⭐7) - An importNode polyfill for IE11 by ungap project.

History / 2018

• 2018-11-29 The Rise of Shadow DOM

• 2018-11-15 The Power of Web Components

• 2018-11-08 A Guide to Custom Elements for React Developers

• 2018-08-21 All about HTML Custom Elements (⭐203)

• 2018-07-16 The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM

Case Studies

• Shipping Web Components in 2020

History / 2016

• The Case for Custom Elements: Part 1

• The Case for Custom Elements: Part 2

Case Studies

• ING Open-Sources Lion, Its White-Label Web Component Library – Q&A with Thomas Allmer

• Web Components at Scale at Salesforce: Challenges Encountered, Lessons Learnt

Angular

• Using Web Components in Angular

Vue

• Using Web Components in Vue

History / 2018

• 2018-11-28 Web Components 101: An Introduction to Web Components

• 2018-05-23 Web Components Introduction: Creating Custom HTML Elements in 2018

History / 2016

• Introducing Custom Elements

History / 2015

• Introducing Slot-Based Shadow DOM API

History / 2014

• The Shadow DOM Diaries

• A Detailed Introduction To Custom Elements

Integrations

• @riotjs/custom-elements (⭐40) - Simple API to create vanilla custom elements with Riot.js.

Interoperability

• Custom Elements That Work Anywhere

• Web Components: Seamlessly interoperable

Podcasts

• Frontend Happy Hour, episode 62: Web Components - shots of shadow DOM

Tools

• web-component-analyzer (⭐520) - CLI that analyzes web components and emits documentation / diagnostics.

Miscellaneous

• Vaadin Directory - Publish, discuss and rate web components

Functional

• atomico (⭐1.3k) - Small library for the creation of interfaces based on web components using functions and hooks.

• haunted (⭐2.7k) - React's Hooks API implemented for web components.

Miscellaneous

• bruck (⭐516) - Prototyping system built with web components and the Houdini Paint API.

• webcomponents.org - Discuss & share web components.

Class Based

• Lightning Web Components (⭐1.8k) - blazing fast, enterprise-grade Web Components foundation.

History / 2011

• Web Components and Model Driven Views by Alex Russell

Integrations

• remount (⭐718) - Mount React components to the DOM using custom elements.

Case Studies

• ING ❤ Web Components

Functional

• hybrids (⭐3.2k) - UI library for creating Web Components with simple and functional API.

Case Studies

• Lessons Learned, making our app with 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.

Best Practices

• Gold Standard Checklist for Web Components (⭐1k)

• Guidelines for creating web platform compatible components

• Open Web Components Recommendations

Class Based

• Omi (⭐13k) - Next generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating).

History / 2018

• 2018-11-21 Get started with Vue web components

History / 2015

• Bringing componentization to the web: An overview of Web Components

History / 2014

• Mozilla and Web Components: Update

History / 2011

• What the Heck is Shadow DOM?

History / 2018

• 2018-05-21 Create & Publish Web Components With Vue CLI 3

History / 2017

• 2017-10-01 Web Components: The Long Game

History / 2016

• Understanding Web Components

History / 2015

• Web Components and their role in the future of web development

• The state of Web Components

History / 2014

• The State of the Componentised Web

• Web Components and you – dangers to avoid

• The Web's Declarative, Composable Future

History / 2013

• A Guide to Web Components

History / 2012

• Introduction to Web Components