Component Libraries

• AgnosticUI (⭐773) - 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 (⭐184) - Write custom elements with reactivity and templating powered by Solid.js signals and effects.

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

Class Based

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

Component Libraries

• AnywhereUI (⭐39) - 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.1k) - Lightweight, customizable loading animations/spinners.

• TrendChart Elements (⭐62) - 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

• Why Web Components?

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

• Who doesn't love some slots?

• Your Content in Shadow DOM Portals

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

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 (⭐120) - 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.

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

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

• An Introduction to Web Components

• What are browser-native web components?

Accessibility

• Accessibility with ID Referencing and Shadow DOM

History / 2019

• Web Components for Cross-Framework Component Libraries

• Web Components in 2019: Part 1

• Web Components in 2019: Part 2

• Web Components in 2019: Part 3

• Web Components in 2019: Part 4

• Developments in Web Components I’m excited about in 2019

History / 2018

• Web Components in 2018

History / 2017

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

• Using Web Components in Ionic (Polymer Summit 2017)

• Web Components for VR (Polymer Summit 2017)

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

• Custom Elements Everywhere (Polymer Summit 2017)

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

• Polymer @ YouTube (Polymer Summit 2017)

• Web Components for CMS (Polymer Summit 2017)

• Web Components v1 - the next generation

History / 2016

• Extensible web components

• Web Component Challenges

• 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 (⭐261)

• 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

• Web Components: Getting Started

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

• FAST Components (⭐9.6k) - Library of Web Components based on the FAST design language.

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

• U-M Library Design System - University of Michigan Library Design System.

History / 2018

• 6 Reasons You Should Use Native Web Components

• Extending Native DOM Elements with Web Components

History / 2016

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

• Why web components are so important

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 (⭐232) - 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 (⭐193) - Web components for creating interactive scientific articles.

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

• Furo Webcomponents (⭐12) - 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 (⭐168) - Complete library of UI components from Infragistics.

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

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

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

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

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

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

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

• VSCode Webview Elements (⭐0) - Components for creating VSCode extensions which use the Webview API.

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

Design Systems

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

• Clarity Core Web Components (⭐185) - Suite of web components from the Clarity Design System.

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

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

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

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

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

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

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

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

Class Based

• Forge Core (⭐7) - Building blocks and utilities that are used when building Forge Web Components.

• Joist (⭐135) - 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 (⭐35k) - 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)

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.

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 (⭐554) - Evolving set of high-quality web components for building business web applications.

Case Studies

• How Web Components Are Used at GitHub and Salesforce

Custom Elements

• Handy Custom Elements' Patterns

Codelabs

• From Web Component to Lit Element

Styling

• Options for styling web components

Podcasts

• Real Talk JavaScript, episode 101: Back to Basics with Native HTML and LitElement

Best Practices

• Developing Components: Publishing

Starter Kits

• Create Open Web Components - Web component project scaffolding.

Tutorials

• Getting started with LitElement and TypeScript

• Navigation Lifecycle using Vaadin Router, LitElement and TypeScript

• Routing Management with LitElement and TypeScript

• Web Components Tools: A Comparison

Tools

• webcomponents.dev - Component IDE for web platform developers.

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.4k) quickly into your page using custom elements.

Component Libraries

• Warp View (⭐8) - Collection of charting web components for Warp 10.

Design Systems

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

Class Based

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

Tutorials

• Creating a Reusable Avatar Web Component

Component Libraries

• Smart Web Components (⭐471) - 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.

Component Libraries

• Shoelace (⭐14k) - A forward-thinking library of web components.

Class Based

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

Integrations

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

Component Libraries

• Immersive Custom Elements (⭐134) - Set of web components for embedding immersive (VR & AR) content.

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

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

Design Systems

• GOV.UK Web Components (⭐5) - Set of encapsulated web components consuming the GOV.UK Design System.

Integrations

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

Angular

• Building and consuming Angular Elements as Web Components

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 (⭐42) - Re-usable web components dedicated to data annotation tasks.

Presentations

• Shadow DOM: off the beaten track by @serhiikulykov

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

• 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 / 2017

• 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 (⭐116) - 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 (⭐143) - 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

Svelte

• Svelte Custom Element API

Podcasts

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

Presentations

• Web Components: Introduction and State of the Art by @webcomp_dev

Talks

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

Accessibility

• Accessibility for Web Components

• How to Make Accessible Web Components — a Brief Guide

• The future of accessibility for custom elements

• The Guide to Accessible Web Components

• Web Components and the Accessibility Object model (AOM)

• Web components still need to be accessible

Examples

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

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

• vanilla-retro-js (⭐17) - 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

• Web Components — the right way

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 (⭐108) - Web components for creating interfaces by Blackstone Publishing.

• elements-sk (⭐29) - Collection of custom elements for "a la carte" web development.

• 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

• Bolt Design System - Twig and Web Component-powered UI components, reusable visual styles and tooling.

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

Starter Kits

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

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

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

Podcasts

• Labs Talk - Web Components with Peter Muessig

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

CSS Shadow Parts

• ::part and ::theme, an ::explainer

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 (⭐77) - Collection of web components for building Brightspace applications.

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

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

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

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

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

• Microsoft Graph Toolkit (⭐1k) - Collection of web components for the Microsoft Graph.

• Nuxeo Elements (⭐27) - 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 (⭐224) - Web Components for Arduino and various electronic parts.

Design Systems

• Calcite Components (⭐346) - Shared Web Components for Esri's Calcite design framework.

• Helix UI (⭐64) - Web Component library for the Helix Design System.

• NuML | NUDE Elements (⭐338) - HTML Framework and Design System based on Web Components and runtime CSS generation.

• PatternFly Elements (⭐389) - 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.

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

• Zooplus web components (⭐50) - Set of web components that implement Z+ shop style guide.

Class Based

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

• Tonic (⭐889) - Minimalist, stable, audit friendly component framework.

Integrations

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

Benchmarks

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

Tutorials

• Handling data with Web Components

• How to use D3js with WebComponents

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

• 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

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 by @viljamis

• Why we use Web Components by @maxlynch

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

• Styling Accessibility: A Web Components Approach

Introduction

• Intro to Web Components

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

CSS Shadow Parts

• MDN - ::part() CSS pseudo element

• MDN - part global attribute

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

• A history of the HTML slot element

History / 2017

• An intro to web components with otters

History / 2014

• Building an Accessible Disclosure Button – using Web Components

Introduction

• The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM

• The Power of Web Components

Custom Elements

• A Guide to Custom Elements for React Developers

• All about HTML Custom Elements (⭐203)

• HTML Living Standard: Custom elements

• web-platform-tests (⭐5.8k)

Shadow DOM

• DOM Living Standard: Shadow tree

• Open vs. Closed Shadow DOM

• Shadow DOM in depth (⭐237)

• The Rise of Shadow DOM

• What is the Shadow DOM?

• web-platform-tests (⭐5.8k)

HTML Templates

• HTML Living Standard: The template element

• web-platform-tests (⭐5.8k)

CSS Shadow Parts

• W3C First Public Working Draft

• CSS Shadow Parts are coming!

• web-platform-tests (⭐5.8k)

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

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 (⭐5.8k)

Constructable Stylesheet Objects

• Specification Draft

• web-platform-tests (⭐5.8k)

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

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

Class Based

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

Angular

• Using Web Components in Angular

Vue

• Using Web Components in Vue

History / 2018

• Web Components 101: An Introduction to Web Components

• 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 (⭐39) - Simple API to create vanilla custom elements with Riot.js.

Interoperability

• Custom Elements That Work Anywhere

• JavaScript frameworks, meet Web Components

• Web Components: Seamlessly interoperable

Podcasts

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

• Real Talk JavaScript, episode 7: Custom Web Components with Rob Wormald

Tools

• web-component-analyzer (⭐516) - 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 (⭐515) - 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.

Angular

• Web Components With Angular Ivy In 6 Steps

History / 2011

• Web Components and Model Driven Views by Alex Russell

Integrations

• remount (⭐724) - 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).

Angular

• Angular Elements Overview

History / 2018

• Get started with Vue web components

History / 2015

• Microsoft Edge and Web Components

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

Class Based

• slim.js (⭐1k) - Fast & Robust Front-End Micro-framework based on modern standards.

History / 2018

• Create & Publish Web Components With Vue CLI 3

History / 2017

• Web Components: The Long Game

• The broken promise of Web Components

• Regarding the broken promise of Web Components

History / 2016

• Demythstifying Web Components

• 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

• Notes on Web Components + ARIA

• Introduction to Web Components