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

Specifications

Standards

Proposals

CSS Shadow Parts

Form-associated Custom Elements

Constructable Stylesheet Objects

Builtin Modules

  • std-switch - Proposal for <std-switch> HTML element implementing a 'switch' control.
  • std-toast - Proposal for <std-toast> HTML element implementing a 'toast' pop-up notification.

Polyfills

@webcomponents

The polyfills below are maintained by Polymer team.

@ungap

The polyfills below are maintained by ungap project.

Articles

Introduction

Custom Elements

Shadow DOM

HTML Templates

Best Practices

Interoperability

Accessibility

Use Cases

Libraries

Class Based

  • Corpuscule - Small Web Components framework based on decorators.
  • LitElement - Simple base class for creating fast, lightweight web components. Part of the Polymer Project.
  • Lightning Web Components - blazing fast, enterprise-grade Web Components foundation.
  • Omi - Next generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating).
  • Polymer - Original web component library by the Polymer Project authors.
  • readymade - JavaScript microlibrary for developing Web Components with decorators.
  • 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.

Functional

  • atomico - Small library for the creation of interfaces based on web components using functions and hooks.
  • functional-web-component - Functional component like React, but for Web Components.
  • haunted - React's Hooks API implemented for web components.
  • hybrids - UI library for creating Web Components with simple and functional API.
  • reLift-HTML - Small (3kb) view library allowing to create Web Components and to make HTML pages reactive.
  • 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.

Compilers

  • Stencil - Compiler that generates Web Components.
  • Svelte - Cybernetically enhanced web apps (can optionally generate Web Components).

Other

  • 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.
  • remount - Mount React components to the DOM using custom elements.
  • @riotjs/custom-elements - Simple API to create vanilla custom elements with Riot.js.

Component Libraries

  • Amber Components - Web Components implementation of the Amber Design System.
  • AMP HTML - Web component library for building web pages that render with reliable and fast performance.
  • Bronconents - Modern Web Components built with Lit-Element.
  • Carbon Custom Elements - Experimental variant of Carbon Design System built with Web Components.
  • Clever components - Collection of Web Components made by Clever Cloud.
  • Elix - High-quality, customizable web components for common user interface patterns.
  • LRNWebComponents - ELMS:LN produced web components for any project.
  • Material Web Components - Material Design implemented as Web Components.
  • Microsoft Graph Toolkit - Collection of web components for the Microsoft Graph.
  • PatternFly Elements - Collection of flexible and lightweight Web Components, and the tools to build them.
  • UI5 Web Components - Components library providing the enterprise-flavored sugar on top of native APIs.
  • 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.

Frameworks

Angular

Vue

Ember

Aurelia

Tools

Books

Tutorials

Podcasts

Benchmarks

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.

2017

2016

2015

2014

2013

2012

2011

Who To Follow

Chrome Developers
Polymer
Edge Platform Updates
Web Components
Hayato Ito
Rob Dodson
Eric Bidelman
Justin Fagnani

License

Copyright 2014-2018, All rights reserved.

Code licensed under the: MIT license

@author Mateus Ortiz [email protected]