Understanding Web Components: Custom Elements, HTML Templates, and Shadow DOM

Web Components are a set of standardized browser APIs that enable developers to create reusable, encapsulated UI elements, addressing the limitations of traditional HTML tags and the need for component reuse across various front‑end projects.

The article begins with a practical example of a circular progress bar, illustrating how developers can implement such components using modern frameworks (React, Vue, Angular, Svelte, Solid) or plain HTML, CSS, and JavaScript.

It then discusses the historical attempts at component encapsulation, such as Microsoft’s HTC in Internet Explorer and Firefox’s XML Binding Language, both of which have been deprecated.

Modern browsers now support Web Components, a specification maintained by the WhatWG, which provides three core features:

Custom Elements

Custom Elements allow developers to define new HTML tags with custom behavior and styling. Two types exist:

Customized built‑in elements (e.g., extending HTMLButtonElement ).

Autonomous custom elements (e.g., <user-card> ).

Key syntax includes customElements.define('hello-button', class extends HTMLButtonElement { /* ... */ }, { extends: 'button' }); and using the is attribute when instantiating a built‑in extension.

Browser support varies: Chrome, Edge, Firefox, and Opera support both types, while Safari currently lacks support for customized built‑in elements.

HTML Template

The <template> element enables developers to declare markup that is not rendered until instantiated, improving performance and simplifying component creation.

Combined with the <slot> element, templates allow dynamic content insertion, where named slots act as placeholders for external markup.

Example usage (simplified):

<template id="card-template">
  <style>/* component styles */</style>
  <div class="card">
    <slot name="title">Default Title</slot>
    <slot name="content">Default Content</slot>
  </div>
</template>

When the component is instantiated, the template’s content is cloned and attached to the component’s shadow root.

Shadow DOM

Shadow DOM provides true encapsulation by attaching a separate DOM tree to an element, isolating its markup, styles, and scripts from the rest of the page.

Key concepts include Shadow Host, Shadow Root, Shadow Tree, Light DOM, and Shadow Boundary. The :host selector styles the host element from within the shadow tree, while ::part() allows styling of exposed parts of the shadow DOM (supported from Chrome 73).

Example of creating an open shadow root:

const host = document.querySelector('#my-element');
const shadow = host.attachShadow({ mode: 'open' });
shadow.innerHTML = `
`;

Using mode: 'closed' hides the shadow root from external scripts.

The article also includes a table of Custom Elements lifecycle callbacks:

Lifecycle

Description

connectedCallback()

Called each time the element is inserted into the document.

disconnectedCallback()

Called when the element is removed from the document.

adoptedCallback()

Called when the element is moved to a new document.

attributeChangedCallback(name, oldValue, newValue)

Called when an observed attribute is added, removed, or changed.

Finally, the article compares Web Components to modern front‑end frameworks, noting that frameworks like Vue can compile components to Web Components and that native components can offer performance benefits but often require additional abstraction for data‑driven development.

The conclusion emphasizes that Web Components are still evolving, with increasing browser support, and predicts broader adoption as native component APIs mature.