All specs
HTML LS §Custom Elements / Shadow DOMWHATWGMust KnowProduct

Web Components

Browser Platform·Web Hypertext Application Technology Working Group
WHY YOU NEED THIS

Every component framework (React, Vue, Lit, Angular) either compiles to or interacts with these primitives. Shadow DOM is how browsers isolate component internals. Understanding the native model prevents framework lock-in.

What It Defines

The browser's native component model: Custom Elements (defining new HTML tags with lifecycle callbacks), Shadow DOM (encapsulated DOM subtrees with scoped styles), HTML Templates (<template> and <slot> elements). Defined across the HTML and DOM living standards.

web-componentscustom-elementsshadow-domtemplatesbrowser
Standards Body
Web Hypertext Application Technology Working Group

Maintains the living standards for the web platform: HTML, DOM, Fetch, URL, Streams, and more. These are continuously updated living documents, not versioned snapshots.

Visit

Related Specs

WHATWG HTML LSWHATWGMust Know

HTML

The spec behind every HTML page, form, and browser API. The canonical reference for how browsers actually parse and process HTML.

ProductBrowser Platform
Details
WHATWG DOM LSWHATWGMust Know

DOM

Every frontend framework (React, Vue, Svelte) ultimately produces DOM operations. Understanding the event model and tree structure prevents subtle bugs.

ProductBrowser Platform
Details
W3C CSS SnapshotW3CMust Know

CSS

CSS drives all visual layout. Key modules: Grid, Flexbox, Custom Properties, Cascade layers, Container Queries. The snapshot identifies what's stable vs experimental.

ProductBrowser Platform
Details