doc22940 / webcomponents-the-right-way

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

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
  • Standards
  • Proposals
    • CSS Shadow Parts
    • Form-associated Custom Elements
    • Constructable Stylesheet Objects
    • Custom State Pseudo Class
  • Polyfills
    • @webcomponents
    • @ungap
• Articles
  • Introduction
  • Custom Elements
  • Shadow DOM
  • HTML Templates
  • Best Practices
  • Interoperability
  • Accessibility
  • Use Cases
• Libraries
  • Class Based
  • Functional
  • Compilers
  • Other
• Component Libraries
• Frameworks
  • Angular
  • Vue
  • Ember
  • Aurelia
• Tools
• Books
• Tutorials
• Podcasts
• Benchmarks
• Miscellaneous
• History
• Who to follow
• License

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

Specifications

Standards

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

  • HTML Living Standard
  • DOM Living Standard
  • web-platform-tests
  • Chrome Platform Status metrics

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

  • DOM Living Standard, section 4.2.2: shadow tree
  • DOM Living Standard, section 4.8: interface ShadowRoot
  • web-platform-tests
  • Chrome Platform Status metrics

• <template> element is used to declare fragments of HTML that can be cloned and inserted in the document by script.

  • HTML Living Standard
  • Chrome Platform Status metrics

Proposals

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.
• Mozilla issue: Implement CSS Shadow Parts
• WebKit issue: Add the support for the CSS shadow parts

Form-associated Custom Elements

• Form Participation API Explained - Document by Google Chrome team.
• Form-associated custom elements - Feature in Chrome platform status.
• web-platform-tests

Custom State Pseudo class

• Blink: Intent to implement
• ElementInternals's states property and the :state() pseudo class

Constructable Stylesheet Objects

• Specification Draft
• web-platform-tests
• Explainer
• Constructable Stylesheets - Feature in Chrome platform status.

Polyfills

@webcomponents

The polyfills below are maintained by Polymer team.

• @webcomponents/custom-elements - Polyfill for HTML Custom Elements v1.
• @webcomponents/shadydom - ShadowDOM v1 shim.
• @webcomponents/shadycss - ShadowDOM style encapsulation shim.
• @webcomponents/template - Minimal polyfill for <template>.

@ungap

The polyfills below are maintained by ungap project.

• @ungap/custom-elements-builtin - polyfill for Custom Elements builtin extends.

Articles

Introduction

• The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM
• The Power of Web Components
• The Case for 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
• Web Components in 2019: An Overview of the Most Exciting Proposals for the Web Platform Related to Web Components

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

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

Interoperability

• Custom Elements That Work Anywhere
• JavaScript frameworks, meet Web Components
• Web Components: Seamlessly interoperable

Accessibility

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

Use Cases

• Bringing Order to Web Design Chaos (with Web Components)
• ING ❤ Web Components
• 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
• Reasons Web Components are perfect for a big company
• Why we use Web Components

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

• 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)
• Angular Elements, Part V: Your Options For Building Angular Elements With The CLI
• Building Custom Elements / Web Components with Angular 6
• Web Components With Angular Ivy In 6 Steps

Vue

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

Ember

• ember-shadow-dom

Aurelia

• Aurelia Web Components plugin

Tools

• Cypress Daywalker - Web Components and Shadow DOM support for Cypress.
• web-component-analyzer - CLI that analyzes web components and emits documentation / diagnostics.

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
  • Part 7: Hybrids

• "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
  • Part 3: Web Components hero with LitElement

• CSS tricks article series by Caleb Williams

  • Part 1: An Introduction to Web Components
  • Part 2: Crafting Reusable HTML Templates
  • Part 3: Creating a Custom Element from Scratch
  • Part 4: Encapsulating Style and Structure with Shadow DOM
  • Part 5: Advanced Tooling for Web Components

Podcasts

• Frontend Happy Hour, episode 62: Web Components - shots of shadow DOM
• Real Talk JavaScript, episode 7: Custom Web Components with Rob Wormald

Benchmarks

• web-components-benchmark - Benchmark Web Components technologies with various examples.
• web-components-todo - The same todo application built in different Web Components libraries for benchmark purpose.

Miscellaneous

• bruck - Prototyping system built with web components and the Houdini Paint API.
• Vaadin Directory - Publish, discuss and rate web components
• webcomponents.dev - Your studio for Web Components.
• webcomponents.org - Discuss & share web components.
• webcomponents.news - Collection of articles, tutorials, micro-libraries and websites that showcase Web Components.
• web-components-examples - Series of web components examples, related to the MDN web components documentation.

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

• Web Components and Model Driven Views by Alex Russell
• What the Heck is Shadow DOM?

Who To Follow

Polymer	Stencil	open-wc.org	webcomponents.dev
Justin Fagnani	Viljami Salminen	Jan Miksovsky	Serhii Kulykov

License

Copyright 2014-2018, All rights reserved.

Code licensed under the: MIT license

@author Mateus Ortiz [email protected]