Web Components the Right Way

Awesome

A curated list of awesome Web Components resources.

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

Web Components the Right Way was made with love by Mateus Ortiz and maintained by Serhii Kulykov

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.

Polyfills

Custom Elements polyfills

Customized Built-in Elements polyfills

Shadow DOM shims

HTML Templates polyfills

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

Starter Kits

Tools

Books

Tutorials

Insights

Podcasts

Presentations

Talks

Usage Metrics

Proposals

Form-associated Custom Elements

Custom State Pseudo class

Constructable Stylesheet Objects

Miscellaneous

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

License

Copyright 2014-2018, All rights reserved.

Code licensed under the: MIT license

@author Mateus Ortiz [email protected]