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.

• Specifications
• Introduction
• Custom Elements
• Shadow DOM
• HTML Templates
• Polyfills
• Best Practices
• Use Cases
• Accessibility
• Discover
• Libraries
  • Class Based
  • Functional
  • Other
• Component Libraries
• Frameworks
  • Overview
  • Angular
  • Vue
  • Aurelia
• 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

• 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

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

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

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

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

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

• 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

• bruck - Prototyping system built with web components and the Houdini Paint API.
• 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.

• Corpuscule - Small Web Components framework based on decorators.
• 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.

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

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

• AMP HTML - Web component library for building web pages that render with reliable and fast performance.
• 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.
• 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.

• JavaScript frameworks, meet Web Components
• Web Components: Seamlessly interoperable

• 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

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

• Aurelia Web Components plugin

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

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

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

• Polymer Blog - The latest goings-on with the Polymer project and in the community.

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.

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

• Demythstifying Web Components
• Understanding Web Components

• 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

• 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

• A Guide to Web Components

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

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

• 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

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

• 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

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

Copyright 2014-2018, All rights reserved.

Code licensed under the: MIT license

@author Mateus Ortiz [email protected]