Curated list of awesome lists
Web Components the Right Way
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.
Web Components the Right Way was made with love by Mateus Ortiz and maintained by Serhii Kulykov
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.
<template> element is used to declare fragments of HTML that can be cloned and inserted in the document by script.
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.
slim.js - Fast & Robust Front-End Micro-framework based on modern standards.
Smart Custom Element - UI library for creating custom elements with simple API.
hybrids - UI library for creating Web Components with simple and functional API.
osagai - Tiny library for creating Web Components in a functional way.
Switzerland - Library allowing to create Web Components in a functional way via middleware functions.
ullr - Library for building Web Components with functional programming.
custom-element-ts - Create native custom elements using Typescript without using any third party libraries.
preact-custom-element - Generate/register a custom element from a preact component.
Elix - High-quality, customizable web components for common user interface patterns.
Material Web Components - Material Design implemented as Web Components.
Vaadin components - Evolving set of high-quality web components for building business web applications.
Wired Elements - Set of common UI elements with a hand-drawn, sketchy look.
Stencil - compiler that generates web components.
Svelte - compiler which can be configured to generate custom elements.
Polymer Blog - The latest goings-on with the Polymer project and in the community.
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.
CSS Shadow Parts
Form-associated Custom Elements
Constructable Stylesheet Objects
Who To Follow
Copyright 2014-2018, All rights reserved.
Code licensed under the:
@author Mateus Ortiz [email protected]