Web Components are a suite of browser-native APIs enabling developers to create reusable, encapsulated HTML elements without framework dependencies. They consist of three core standards — Custom Elements (for defining new tags), Shadow DOM (for style and markup encapsulation), and HTML Templates (for reusable markup patterns) — forming the foundation of framework-agnostic component development. Understanding lifecycle hooks, shadow boundaries, slot composition, and form integration transforms Web Components from simple wrappers into production-ready UI primitives that work seamlessly across React, Vue, Angular, or plain HTML.
What This Cheat Sheet Covers
This topic spans 13 focused tables and 91 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Custom Element Types and Registration
Custom elements extend HTML's vocabulary, allowing you to define behavior for entirely new tags or enhance existing elements. The two types — autonomous and customized built-in — serve different architectural needs: autonomous elements create brand-new tags you control completely, while customized built-ins inherit semantics and accessibility from native elements like buttons or inputs. Both must follow strict naming rules and registration patterns to avoid conflicts.
| Type | Example | Description |
|---|---|---|
class MyButton extends HTMLElement {}customElements.define('my-button', MyButton); | • Standalone element extending HTMLElement directly; creates a completely new tag with no inherited semantics or accessibility• Must be used as <my-button>• Full control over behavior and structure | |
class FancyButton extends HTMLButtonElement {}customElements.define('fancy-button', FancyButton, {extends: 'button'}); | • Extends an existing native element; preserves native semantics, accessibility, and form participation • Used as <button is="fancy-button">• Not supported in Safari (requires polyfill or fallback) | |
<user-profile>, <app-header>, <data-table> | • Tag names must contain at least one hyphen (kebab-case) to avoid conflicts with current and future HTML tags • Name must start with a lowercase letter • Cannot use uppercase or most special characters except hyphens and periods | |
customElements.define('my-widget', MyWidget); | • Registers a custom element with the global registry; once defined, the tag becomes live and all existing instances in the DOM are upgraded • Throws error if name is already registered or invalid |