Web Components the Right Way

This is a guide intended to introduce to Web Components. Everyone can contribute here!

Specifications
Introduction
Custom Elements
Shadow DOM
HTML Templates
Tutorials
Polyfills
Libraries
Frameworks
Best Practices
Blogs - History
Who to follow
License

Web Components the Right Way was made with love by Mateus Ortiz

Specifications

Custom Elements provide a way for authors to build their own fully-featured DOM elements.
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.
- W3C Editor's Draft
- DOM Living Standard, section 4.2.2: shadow tree
- DOM Living Standard, section 4.8: interface ShadowRoot
- W3C DOM 4.1 Working Draft, section 4.2.2: shadow tree
- W3C DOM 4.1 Working Draft, section 4.8: interface ShadowRoot
<template> element is used to declare fragments of HTML that can be cloned and inserted in the document by script.
- HTML Living Standard
- W3C HTML 5.1 2nd Edition

Introduction

Custom Elements

Shadow DOM

HTML Templates

Tutorials

"Let's Build Web Components!" by Benny Powers
"Web components: from zero to hero" by Pascal Schilp
- Part 1: An introduction to writing raw Web Components
- Part 2: Supercharging Web Components with lit-html

Polyfills

webcomponents.js - Suite of polyfills supporting the HTML Web Components specs.
custom-elements - Polyfill for HTML Custom Elements v1.
shadydom - ShadowDOM v1 shim.
shadycss - ShadowDOM style encapsulation shim.
template - Minimal polyfill for <template>.

Libraries

LitElement - Simple base class for creating fast, lightweight web components. Part of the Polymer Project.
Polymer - Original web component library by the Polymer Project authors.
Skate - Web component library focusing on a functional rendering pipeline and a small footprint.
Omi - Next generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating).
hybrids - UI library for creating Web Components with simple and functional API.
slim.js - Fast & Robust Front-End Micro-framework based on modern standards.
Switzerland - Library allowing to create Web Components in a functional way via middleware functions.

Frameworks

Best Practices

Blogs

webcomponents.org - Home of the Web Components community.
Polymer Blog - The latest goings-on with the Polymer project and in the community.

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.