Web Components Cheat Sheet

Updated 2026-05-17

🧠Study flashcards on this topic75 cards · spaced repetition→

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, 75 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Custom Element Types and RegistrationTable 2: Lifecycle CallbacksTable 3: Shadow DOM Creation and ConfigurationTable 4: Shadow DOM Styling SelectorsTable 5: HTML Templates and SlotsTable 6: Custom Events and CommunicationTable 7: Form-Associated Custom ElementsTable 8: Frameworks and LibrariesTable 9: Accessibility and ARIATable 10: Advanced Shadow DOM FeaturesTable 11: Testing and Build ToolsTable 12: Design Systems and Component LibrariesTable 13: Browser Support and Polyfills

Quick IndexSubscribe to unlock

A jump-to index of every table row in this cheat sheet.

Mind MapSubscribe to unlock

An interactive map of every table and concept in this topic.

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
Autonomous custom element	`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
Customized built-in element	`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)
Element naming requirement	`<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()`	`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
`customElements.whenDefined()`	`await customElements.whenDefined('my-widget');` `element.focus();`	• Returns a promise that resolves when the element is defined; use when you need to wait for an element's class to be registered before accessing its methods or properties • Essential for timing-dependent initialization
`customElements.upgrade()`	`customElements.upgrade(shadowRoot);`	• Manually upgrades custom elements in a shadow tree before they are connected • primarily used with declarative shadow DOM or when programmatically constructing detached shadow trees
`customElements.get()`	`const MyClass = customElements.get('my-widget');` `new MyClass();`	• Returns the constructor for a registered custom element or `undefined` if not registered • Useful for programmatic instantiation or checking if a component is already defined

Table 2: Lifecycle Callbacks

Lifecycle callbacks provide hooks into critical moments of a custom element's existence. The constructor runs immediately when the element is created, but should only set up event listeners and shadow roots — accessing attributes or children risks breaking because the element may not be fully parsed yet. connectedCallback is where most initialization happens, fired every time the element enters the DOM. Understanding the order and constraints of each hook prevents subtle bugs around timing, especially when elements are moved, cloned, or dynamically created.

Callback	Example	Description
`constructor()`	`constructor() {` `super();` `this.attachShadow({mode: 'open'});` `}`	• Runs when element is created or upgraded; must call `super()` first • Cannot access attributes or children — element may not be fully parsed • Attach shadow root and initialize internal state only

The rest of this section is part of the full cheat sheet

Table 3: Shadow DOM Creation and Configuration

Shadow DOM creates a separate DOM subtree attached to a host element, isolating styles and internal structure from the rest of the page. The mode option determines whether external JavaScript can access the shadow root — open mode allows element.shadowRoot, while closed mode hides it (though closed mode is often considered an anti-pattern because it provides minimal security and breaks debugging). Additional options like delegatesFocus, clonable, and serializable control focus behavior, cloning semantics, and server-side rendering compatibility.

Property	Example	Description
`attachShadow({mode: 'open'})`	`this.attachShadow({mode: 'open'});` `this.shadowRoot.innerHTML = '<p>Content</p>';`	• Creates a shadow root and returns it; `mode: 'open'` allows external access via `element.shadowRoot` • Styles and DOM inside shadow root are isolated from the outer document

The rest of this section is part of the full cheat sheet

Table 4: Shadow DOM Styling Selectors

Styling shadow DOM requires special pseudo-elements and CSS selectors because the shadow boundary isolates styles bidirectionally — outer styles don't leak in (except inherited properties like color and font-family), and inner styles don't leak out. The :host pseudo-class styles the shadow host from inside the shadow tree, while ::part() and ::slotted() allow selective styling across the boundary. CSS custom properties (variables) pierce the shadow boundary intentionally, providing the primary mechanism for themeable components.

Selector	Example	Description
`:host`	`:host {` `display: block;` `padding: 1rem;` `}`	• Selects the shadow host element from inside the shadow tree; use to apply styles to the custom element itself • Specificity is low; external styles can override

The rest of this section is part of the full cheat sheet

Table 1: Custom Element Types and Registration

Type	Example	Description
Autonomous custom element	`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
Customized built-in element	`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)
Element naming requirement	`<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()`	`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
`customElements.whenDefined()`	`await customElements.whenDefined('my-widget');` `element.focus();`	• Returns a promise that resolves when the element is defined; use when you need to wait for an element's class to be registered before accessing its methods or properties • Essential for timing-dependent initialization
`customElements.upgrade()`	`customElements.upgrade(shadowRoot);`	• Manually upgrades custom elements in a shadow tree before they are connected • primarily used with declarative shadow DOM or when programmatically constructing detached shadow trees
`customElements.get()`	`const MyClass = customElements.get('my-widget');` `new MyClass();`	• Returns the constructor for a registered custom element or `undefined` if not registered • Useful for programmatic instantiation or checking if a component is already defined

Table 2: Lifecycle Callbacks

Callback	Example	Description
`constructor()`	`constructor() {` `super();` `this.attachShadow({mode: 'open'});` `}`	• Runs when element is created or upgraded; must call `super()` first • Cannot access attributes or children — element may not be fully parsed • Attach shadow root and initialize internal state only

Table 3: Shadow DOM Creation and Configuration

Property	Example	Description
`attachShadow({mode: 'open'})`	`this.attachShadow({mode: 'open'});` `this.shadowRoot.innerHTML = '<p>Content</p>';`	• Creates a shadow root and returns it; `mode: 'open'` allows external access via `element.shadowRoot` • Styles and DOM inside shadow root are isolated from the outer document

Table 4: Shadow DOM Styling Selectors

Selector	Example	Description
`:host`	`:host {` `display: block;` `padding: 1rem;` `}`	• Selects the shadow host element from inside the shadow tree; use to apply styles to the custom element itself • Specificity is low; external styles can override