Web Components are native browser APIs - Custom Elements, Shadow DOM, and HTML Templates - that let you create reusable, encapsulated UI elements like <modal-dialog> or <accordion-panel> that work in React, Vue, Svelte, Angular, or plain HTML without build tools or framework dependencies. With 98% browser support across all modern browsers in 2026, they are the most portable component format available: write it once, ship it anywhere.

The Three APIs That Make Up Web Components

Web Components is an umbrella term for three distinct browser APIs that work together. You can use each independently - Custom Elements without Shadow DOM, Shadow DOM without Templates - but the combination is where they become genuinely useful.