View on Github

Web Components the Right Way

Awesome

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

Contents

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

Specifications

Introduction

Custom Elements

Shadow DOM

HTML Templates

Tutorials

Polyfills

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.
  • custom-element-ts - Create native custom elements using Typescript without using any third party libraries.

Frameworks

Angular

Vue

Best Practices

Discover

Blogs

  • 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.

2017

2016

2015

2014

2013

2012

2011

Future

CSS Shadow Parts

Form-associated Custom Elements

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 mteusortiz@gmail.com