Web components (custom elements)

Web components are browser standards, mainly custom elements and Shadow DOM, for defining reusable HTML elements that work in any framework or in plain HTML.

Web components are a set of browser standards for building reusable HTML elements. The main ones are custom elements, which let you define a tag such as <user-card> with its own behavior, and Shadow DOM, which gives the element a private DOM tree and scoped styles. Any framework can render a custom element, because to the framework it is a regular HTML tag.

Example

class UserCard extends HTMLElement {
  connectedCallback() {
    const name = this.getAttribute('name');
    this.textContent = 'User: ' + name;
  }
}
customElements.define('user-card', UserCard);

After this code runs, <user-card name="Ana"></user-card> works in an AngularJS template, in an Angular template or in plain HTML. Angular can package one of its own components this way with createCustomElement from @angular/elements.

Custom elements are useful in two situations: design system components that must work across frameworks, and wrapping a new feature so that a legacy page can host it.

Common misunderstanding

A custom element hides its framework from the page that uses it. The framework is still downloaded. If five elements each bundle their own copy of a framework, the page loads five copies.

Web components define an interface at the DOM level. They do not provide routing, dependency sharing or independent deployment, so in a micro-frontend platform they are usually combined with a federation tool or with import maps. Two details also surprise teams: attributes only carry strings, so rich data has to go in through properties, and Shadow DOM is optional. See micro-frontends for how the pieces fit together.

Related terms

• Micro-frontend
• Design system
• single-spa