Web components resources

Project resources

Polyfills

webcomponentsjs (ie11+)
webcomponentsjs - shadyDOM only
Derek Gray's shadow DOM only polyfill
document-register-element - custom elements only (5k, IE9+)

Build tools

Polymer-cli
npm generator-element (has out-of-date dependencies)
polymer-webpack-loader
stencil.js - eats .jsx files and makes web components

Learning resources

Google Developer Guide

https://developers.google.com/web/fundamentals/web-components/

webcomponents.org guide

https://www.webcomponents.org/introduction

Videos

Courses

HTML5 Web Component Fundamentals course on Pluralsight

Google Polycasts - for learning Polymer

Conference talks

Monica Dinculescu: Practical lessons from a year of building web components - Google I/O 2016

Progressive Web Apps Summit 2016 (Pretty much all the talks are here. If you only have time for one I'd highly recommend Building for Billions)

Online books

Modern Javascript by Jason Strimpel chapter 5: Working with the Shadow DOM

Blog posts

Web components

Ayush Gupta: HTML web component using plain javascript
Prosper Otemuyiwa: How to craft your own custom components
Brian Kardell: <i is="the walrus"> (all about progressive enhancement with web components)
Alan Semenov: Web components vs iframes
Dr Axel Rauschmayer: What happened to web components?
Dmitrii Dimandt: The broken promise of web components
Rob Dodson: Regarding the broken promise of web components

Shadow DOM

Praveen Puglia: Everything you need to know about Shadow DOM
Chris Coyier: Playing with the shadow DOM
Leon Revill: Open vs closed shadow DOM

Web components resources
Share this