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.

Contents

• Specifications
• Introduction
• Custom Elements
• Shadow DOM
• HTML Templates
• Polyfills
• Best Practices
• Use Cases
• Accessibility
• Discover
• Libraries
  • Class Based
  • Functional
  • Other
• Component Libraries
• Frameworks
  • Angular
  • Vue
• Compilers
• Books
• Tutorials
• Blogs
• History
• Future
  • CSS Shadow Parts
  • Form-associated Custom Elements
  • Constructable Stylesheet Objects
• Who to follow
• License

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

Specifications

• Custom Elements provide a way for authors to build their own fully-featured DOM elements.

  • HTML Living Standard
  • DOM Living Standard
  • W3C HTML 5.3 Working Draft
  • W3C DOM 4.1 Working Draft
  • web-platform-tests

• 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
  • web-platform-tests

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

• The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM
• The Power of Web Components
• Styling a Web Component
• Web Components 101: An Introduction to Web Components
• Web Components in 2018
• Web Components Introduction: Creating Custom HTML Elements in 2018

Custom Elements

• Custom Elements v1: Reusable Web Components
• Custom Elements Everywhere
• All about HTML Custom Elements
• Introducing Custom Elements (WebKit)
• The Case for Custom Elements: Part 1
• The Case for Custom Elements: Part 2
• Custom Elements That Work Anywhere
• Using Custom Elements (MDN)
• A Guide to Custom Elements for React Developers

Shadow DOM

• Shadow DOM v1: Self-Contained Web Components
• What is the Shadow DOM?
• The Rise of Shadow DOM
• Shadow DOM in depth
• What's New in Shadow DOM v1 (by examples)
• Introducing Slot-Based Shadow DOM API (WebKit)
• Using Shadow DOM (MDN)
• Open vs. Closed Shadow DOM

HTML Templates

• <template>: The Content Template element
• Using templates and slots (MDN))

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

Best Practices

• Custom Element Best Practices
• Gold Standard Checklist for Web Components
• Guidelines for creating web platform compatible components
• HowTo: Components
• Open Web Components Recommendations

Accessibility

• Styling Accessibility: A Web Components Approach
• The future of accessibility for custom elements
• Web components still need to be accessible

Use Cases

• Lessons Learned, making our app with Web Components
• Making Web Components Work
• Micro Frontends — extending the microservice idea to frontend development
• Web Components — the right way

Discover

• webcomponents.org - Discuss & share web components.
• web-components-benchmark - Benchmark for a Todo list application with various Web Components technologies.
• web-components-examples - Series of web components examples, related to the MDN web components documentation.
• web-components-todo - Simple todo list built with various Web Components technologies.

Libraries

Class Based

• LitElement - Simple base class for creating fast, lightweight web components. Part of the Polymer Project.
• 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.
• 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

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

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.

Component Libraries

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

Frameworks

Angular

• Angular Elements Overview
• Angular Elements, Part I: A Dynamic Dashboard In Four Steps With Web Components
• Angular Elements, Part II: Lazy And External Web Components
• Angular Elements, Part III: Angular Elements Without Zone.Js
• Angular Elements, Part IV: Content Projection with Slots in Angular Elements (>=7)
• Building Custom Elements / Web Components with Angular 6

Vue

• Create & Publish Web Components With Vue CLI 3
• Get started with Vue web components

Compilers

• Stencil - compiler that generates web components.
• Svelte - compiler which can be configured to generate custom elements.

Books

• Web Components in Action - Book by Ben Farrell, available at Manning early release program.
• Web Component Essentials - Book by Cory Rylan, early preview edition available at Leanpub.

Tutorials

• "Let's Build Web Components!" by Benny Powers

  • Part 1: The Standards
  • Part 2: The Polyfills
  • Part 3: Vanilla Components
  • Part 4: Polymer Library
  • Part 5: LitElement
  • Part 6: Gluon

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

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

• Web Components: The Long Game
• The broken promise of Web Components
• Regarding the broken promise of Web Components

2016

• Demythstifying Web Components
• Understanding Web Components

2015

• Web Components and their role in the future of web development
• Microsoft Edge and Web Components
• Bringing componentization to the web: An overview of Web Components
• The state of Web Components

2014

• A No-Nonsense Guide to Web Components
• Mozilla and Web Components: Update
• The State of the Componentised Web
• Web Components and you – dangers to avoid
• The Web's Declarative, Composable Future

2013

• A Guide to Web Components

2012

• Notes on Web Components + ARIA
• Introduction to Web Components

2011

• What the Heck is Shadow DOM?

Future

CSS Shadow Parts

• W3C First Public Working Draft
• web-platform-tests
• Explainer: CSS Shadow ::part and ::theme
• ::part and ::theme pseudo elements on shadow hosts - Feature in Chrome platform status.
• Intent to Ship: CSS shadow parts - Blink implementation update, 10.12.2018.
• Mozilla issue: Implement CSS Shadow Parts
• WebKit issue: Add the support for the CSS shadow parts

Form-associated Custom Elements

• GitHub issue
• Intent to Implement: Form-associated custom elements - Blink implementation update, 16.11.2018.
• Form Participation API Explained - Document by Google Chrome team.
• Form-associated custom elements - Feature in Chrome platform status.

Constructable Stylesheet Objects

• GitHub issue
• Specification Draft
• web-platform-tests
• Explainer
• Intent to Ship: Constructable Stylesheet Objects - Blink implementation update, 13.12.2018.
• Constructable Stylesheets - Feature in Chrome platform status.
• GitHub issue for Polymer integration
• GitHub issue for lit-html integration

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