Home

Awesome

Awesome Web Components Awesome

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.

Contents

Introduction

Standards

Custom Elements

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

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.

HTML Templates

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

CSS Shadow Parts

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

Guides

Accessibility

Best Practices

Codelabs

Examples

Articles

Architecture

Interoperability

Limitations

Styling

Real World

Case Studies

Components

Component Libraries

Design Systems

Use Cases

Libraries

Class Based

Functional

Integrations

Benchmarks

Frameworks

Angular

React

Vue

Svelte

Ecosystem

Meta Frameworks

Starter Kits

Testing Solutions

Tools

Books

Tutorials

Insights

Podcasts

Presentations

Talks

Usage Metrics

Proposals

Form-associated Custom Elements

Constructable Stylesheet Objects

Custom State Pseudo Class

Miscellaneous

Archive

Polyfills

Modern browsers supports web components standards without any of the polyfills listed below. The only notable exception is that customized built-in elements are rejected by WebKit (Safari).

Custom Elements polyfills

Customized Built-in Elements polyfills

Shadow DOM shims

HTML Templates polyfills

History

The articles below represent a long story of the Web Components specifications on the way towards the standardization. Some of them refer to earlier, so-called "v0" Shadow DOM and Custom Elements specs, and abandoned HTML Imports spec. These materials are here for historical reasons only, they are grouped by years and listed in chronological order.

2019

2018

2017

2016

2015

2014

2013

2012

2011

Who To Follow

<table> <tbody> <tr> <td align="center"> <a href="https://twitter.com/polymer"> <img width="80" height="80" src="https://pbs.twimg.com/profile_images/1063502058337136640/RmlG_bbW_80x80.jpg"> <div>Polymer</div> </a> </td> <td align="center"> <a href="https://twitter.com/stenciljs"> <img width="80" height="80" src="https://pbs.twimg.com/profile_images/1135534552137510914/5ZzvOFFp_80x80.png"> <div>Stencil</div> </a> </td> <td align="center"> <a href="https://twitter.com/openwc"> <img width="80" height="80" src="https://pbs.twimg.com/profile_images/1101188623930662912/YKlBD7n6_80x80.png"> <div>open-wc.org</div> </a> </td> <td align="center"> <a href="https://twitter.com/webcomp_dev"> <img width="80" height="80" src="https://pbs.twimg.com/profile_images/1169270943371407360/U-90Bxn0_80x80.jpg"> <div>webcomponents.dev</div> </a> </td> </tr> <tr> <td align="center"> <a href="https://twitter.com/justinfagnani"> <img width="80" height="80" src="https://pbs.twimg.com/profile_images/378800000808710206/2dbdaa1cb7b0db02f997aea5b40f29b8_80x80.jpeg"> <div>Justin Fagnani</div> </a> </td> <td align="center"> <a href="https://twitter.com/viljamis"> <img width="80" height="80" src="https://pbs.twimg.com/profile_images/671595827740086273/wCUWq-1S_80x80.png"> <div>Viljami Salminen</div> </a> </td> <td align="center"> <a href="https://twitter.com/JanMiksovsky"> <img width="80" height="80" src="https://pbs.twimg.com/profile_images/675000078055051264/u1ZEQfeE_80x80.jpg"> <div>Jan Miksovsky</div> </a> </td> <td align="center"> <a href="https://twitter.com/serhiikulykov"> <img width="80" height="80" src="https://pbs.twimg.com/profile_images/1028197887329685504/cM6nOHlp_80x80.jpg"> <div>Serhii Kulykov</div> </a> </td> </tr> <tbody> </table>

Maintainers