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
- Articles
- Libraries
- Component Libraries
- Frameworks
- 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
-
Custom Elements provide a way for authors to build their own fully-featured DOM elements.
-
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.
- 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 Participation API Explained - Document by Google Chrome team.
- Form-associated custom elements - Feature in Chrome platform status.
- web-platform-tests
- Specification Draft
- web-platform-tests
- Explainer
- Constructable Stylesheets - Feature in Chrome platform status.
- std-switch - Proposal for
<std-switch>HTML element implementing a 'switch' control. - std-toast - Proposal for
<std-toast>HTML element implementing a 'toast' pop-up notification.
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>.
The polyfills below are maintained by ungap project.
- @ungap/custom-elements-builtin - polyfill for Custom Elements builtin extends.
- 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
- 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
- Custom Element Best Practices
- Gold Standard Checklist for Web Components
- Guidelines for creating web platform compatible components
- HowTo: Components
- Open Web Components Recommendations
- Custom Elements That Work Anywhere
- JavaScript frameworks, meet Web Components
- Web Components: Seamlessly interoperable
- 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
- 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.
- 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.
- Stencil - Compiler that generates Web Components.
- Svelte - Cybernetically enhanced web apps (can optionally generate Web Components).
- 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.
- 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.
- 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
- Cypress Daywalker - Web Components and Shadow DOM support for Cypress.
- web-component-analyzer - CLI that analyzes web components and emits documentation / diagnostics.
- 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
-
"Web components: from zero to hero" by Pascal Schilp
-
CSS tricks article series by Caleb Williams
- Frontend Happy Hour, episode 62: Web Components - shots of shadow DOM
- Real Talk JavaScript, episode 7: Custom Web Components with Rob Wormald
- 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.
- 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.
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
- 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
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 mteusortiz@gmail.com