01What You Actually Get

Web Components is an umbrella term for four platform standards that work together: Custom Elements, Shadow DOM, HTML Templates, and the HTML Imports successor (now ES module-based). Together they let you define encapsulated, reusable UI widgets that work in any browser — no framework required.

A Custom Element is straightforward to define:

js
class TooltipWidget extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<span class="tip">${this.getAttribute('text')}</span>`;
  }
}
customElements.define('tooltip-widget', TooltipWidget);

Drop <tooltip-widget text="Hello"> anywhere in your HTML and the browser handles the rest.

Shadow DOM is what gives your element genuine encapsulation. Styles declared inside a shadow root don't leak out, and page styles don't leak in — the boundary is enforced by the browser, not by a build tool's naming convention. HTML Templates (<template>) let you declare inert markup that clones cheaply at runtime, avoiding repeated parsing overhead.

Browser support is now solid across Chromium, Firefox, and Safari. Frameworks like React and Vue can pass data into Custom Elements (with minor caveats around event handling), and projects such as Lit keep the authoring model lean without hiding the platform underneath.

Related reading