Skip to main content
More in Learn

What Are Web Components?

Web Components refer to a suite of different technologies allowing developers to create reusable custom elements — with their functionality encapsulated away from the rest of the code — and utilize them in web applications. These components are part of the web platform and do not depend on libraries or frameworks.

Key Technologies Behind Web Components

There are three leading technologies underpinning Web Components:

  • Custom Elements. These allow developers to define new types of HTML elements. Once described, these elements can be used within the HTML markup, just like any standard element.
  • Shadow DOM. This provides encapsulation for the JavaScript and CSS of a component. The shadow DOM ensures that styles and scripts within the component do not clash with those outside the component and vice versa.
  • HTML Templates (<template> and <slot>). The <template> tag allows developers to write markup templates that aren’t rendered until called upon. The <slot> tag, used within these templates, provides a way to compose components by allowing content to be inserted from outside.

Benefits of Web Components

  • Encapsulation. One of the primary advantages of Web Components is encapsulation. Styles, markup, and behaviors are packaged together, preventing inadvertent style clashes or behavior interference.
  • Reusability. Developers can create a component once and use it across multiple applications or projects.
  • Interoperability. Web Components can be used with any JavaScript library or framework that works with HTML.
  • Standardization. As a native browser feature, Web Components provides a standardized way of building components without relying on external libraries or frameworks.

Lifecycle Callbacks

Custom Elements have a series of lifecycle callbacks, which are triggered during specific stages of the element's existence:

  • constructor(): Invoked when the custom element is first created.
  • connectedCallback(): Called when the custom element is appended to the DOM.
  • disconnectedCallback(): Triggered when the element is removed from the DOM.
  • adoptedCallback(): Called when the element is moved to a new document.
  • attributeChangedCallback(name, oldValue, newValue): Invoked when an attribute of the custom element changes.


To use Web Components, developers define a custom element class, which extends the HTMLElement class. This custom class then gets associated with a custom HTML tag. Once defined, these custom tags can be used within any HTML document, behaving similarly to native HTML elements.


Copy code
class CustomButton extends HTMLElement {
  constructor() {
    // initialization code
  connectedCallback() {
    this.innerHTML = '<button>Click Me!</button>';
customElements.define('custom-button', CustomButton);

This would allow the usage of <custom-button></custom-button> in HTML documents.

While Web Components bring a host of advantages, it's essential to consider compatibility. Although modern browsers have good support for Web Components, legacy browsers might not. It may be necessary to use polyfills or other fallback strategies for broader compatibility.

People showing thumbs up

Need further assistance?

Ask the Crystallize team or other enthusiasts in our slack community.

Join our slack community