Web Components are a set of web platform APIs that let you create reusable, encapsulated custom elements that work natively in the browser. They combine custom elements, shadow DOM and HTML templates to provide a self‑contained piece of UI that can be dropped into any page.
Also called: custom elements, HTML templates, shadow DOM
Why it matters
Using Web Components means a client can get a consistent look and behaviour across the whole site without duplicated code, making future updates cheaper and reducing the risk of visual bugs.
How it works
A developer writes a JavaScript class that extends HTMLElement, registers it with customElements.define, and optionally attaches a shadow root to encapsulate markup and styles. The HTML template element stores the element’s markup, which is cloned into the shadow DOM when the component is instantiated.
The mistake people make
Many people assume Web Components work in all browsers without a polyfill; older browsers will simply ignore the custom element, leaving blank spaces or broken layout. Failing to include a polyfill results in a site that looks incomplete for a portion of users.
Related terms
React components, shadow DOM, HTML template, custom elements
