Create Reusable Web Components in HTML

In this article, we'll learn about Web Components in-depth, the easiest way to create custom HTML elements.



2 years ago | 3 min read

Ever think of creating a webpage using HTML with a simple Header and Footer? That's easy, right?

But what if your application grows, and you need to repeat the same code for the header and footer 5, 10, or say 15 times?

Remember the DRY (Don't Repeat Yourself) principle of software development.

With the introduction of Web Components, it becomes easy to solve this problem and to create reusable HTML components.

This article will learn about Web Components in-depth, the easiest way to create custom HTML elements.

What are Web Components?

It is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

It consists of three main technologies :

  1. HTML templates: The "template" and "slot" elements enable you to write markup templates that are not displayed on the rendered page. These can then be reused multiple times as the basis of a custom element's structure.
  2. Custom elements: A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used as desired in your user interface.
  3. Shadow DOM: A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality.

In this article, we'll discuss the Shadow DOM implementation.

Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree.

It allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal DOM.

Shadow DOM
Shadow DOM

There are some terminologies related to shadow DOM :

  • Shadow host: The regular DOM node that the shadow DOM is attached to.
  • Shadow tree: The DOM tree inside the shadow DOM.
  • Shadow boundary: the place where the shadow DOM ends, and the regular DOM begins.
  • Shadow Root: The root node of the shadow tree.

Let's understand this with a simple example:-

Step 1: Create a Class Definition

To begin with, in our header.js file we define a class called Header, which extends HTMLElement:

Inside the class definition, we define the element's constructor, which defines all the functionality the element will have when an instance of it is instantiated.

Step 2: Create Shadow Root

We first attach a shadow root to the custom element:

There are two options for 'mode' : 'open' & 'closed'.

mode: open means that you can access the shadow DOM using JavaScript written in the main page context.

If you attach a shadow root to a custom element with mode: closed set, you won't be able to access the shadow DOM from the outside — myCustomElem.shadowRoot returns null.

Step 3: Creating the Shadow DOM Structure

Next, we use some DOM manipulation to create the element's internal shadow DOM structure:

Step 4: Attaching the shadow DOM to the shadow root

The final step is to attach all the created elements to the shadow root. connectedCallback runs each time your custom element is inserted into the DOM.

Step 5: Styling the shadow DOM

After that, we create a style element and populate it with some CSS to style it:

In the above example, we apply a style to the Shadow DOM using a style element, but it is perfectly possible to do it by referencing an external stylesheet from a "link" element instead.

Your resultant header.js file will look like this:

Step 6: Import your component into an HTML file

Create an index.html file and add your custom header component to it.

Now run index.html in browser:

Congrats!! You have created your first custom HTML component.

Thank you for reading. I hope you enjoyed reading it. Please share it with your network. Don’t forget to leave your comments below.


Created by


Hello folks!! 👋 I'm Anuradha Aggarwal, a software engineer who likes to explore new technologies, problem-solving, build projects 👩‍💻, and have a keen interest in web development & writing blogs ✍.







Related Articles