A curated list of awesome Web Components resources.
Note This project was previously named "Web Components the Right Way"
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.
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.
<template> element is used to declare fragments of HTML that can be cloned and inserted in the document by script.
CSS Shadow Parts allow developers to expose certain elements inside Shadow DOM for styling purposes.
::part()CSS pseudo element
<api-viewer>- API documentation and live playground for Web Components.
<chess-board>- Standalone chess board web component.
<css-doodle>- Web component for drawing patterns with CSS.
<dark-mode-toggle>- Custom element that allows to create a dark mode toggle or switch.
<emoji-picker>- Lightweight emoji picker, distributed as a web component.
<fg-modal>- Accessible modal dialog web component.
<file-viewer>- Web component built with Svelte to view files.
<json-viewer>- Web component to visualize JSON data in a tree view.
<lite-youtube>- Lite YouTube embed with a focus on visual performance.
<midi-player>- MIDI file player and visualizer web components.
<model-viewer>- Web component for rendering interactive 3D models.
<player-x>- Media player web component.
<progressive-image>- Custom element to progressively enhance image placeholders.
<range-slider>- Accessible range slider custom element with keyboard support.
<rapi-doc>- Web component for creating documentation from OpenAPI Specification.
<shader-doodle>- Web component for writing and rendering shaders.
<theme-switch>- Animated toggle button to switch between light, dark, and system theme.
<trix-editor>- Rich text editor custom element for everyday writing.
<vime-player>- Customizable, extensible, accessible and framework agnostic media player.
<web-vitals>- Bring web vitals quickly into your page using custom elements.
"Let's Build Web Components!" by Benny Powers
"Web components: from zero to hero" by Pascal Schilp
"HowTo: Components" by Web Fundamentals
CSS tricks article series by Caleb Williams
Angular Elements article series by Manfred Steyer
Modern browsers supports web components standards without any of the polyfills listed below. The only notable exception is that customized built-in elements are rejected by WebKit (Safari).
importNodepolyfill for IE11 by ungap project.
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.