How to Create Custom HTML Elements with JavaScript?

JavaScript provides the developer the functionality and flexibility to modify the code in accordance with the requirements via the custom HTML elements. It is such that these elements can be included anywhere in the code and are needed when the developer forgets to append a target feature in the code and wants to add it keeping the other code intact.

This article guides how to create custom HTML elements in JavaScript.

How to Create Custom HTML Elements with JavaScript?

To create custom HTML elements with JavaScript, the “customElements” global is utilized that notifies the browser regarding a new tag. This can be achieved by applying the “customElements.define()” method that creates a new custom element with the custom tag name to be created and a JavaScript class that extends the base “HTMLElement” interface.


customElements.define(x, const, op);

In this syntax:

  • x” specifies the name for the new custom element separated by a hyphen.
  • const” corresponds to the constructor for the created custom element.
  • op” is the optional parameter that indicates the object that controls the definition of an element.

Important Considerations While Creating Custom HTML Elements

  • It is recommended to create a custom element comprising a dash (-) such as “<this-elem>”, “<that-element>” etc.
  • The closing tags of the custom HTML elements should be specified manually since HTML only specifies a self-closing tag for a few elements.

Invoked Functionalities on the Custom Elements

Following are some functionalities that can be applied to the custom elements in different scenarios:

Functionality Invoked Case
constructor It is used to create an element’s instance.
attributeChangedCallback(attribute, old, new) It is called when an observed attribute is added, removed, or updated.
adoptedCallback() This method is invoked when the custom element moves to a new document.
connectedCallback() It is invoked every time the element is added into the DOM.
disconnectedCallback() This method is accessed each time the element is removed/omitted from the DOM.

Example: Creating a Custom Element in JavaScript
This example demonstrates to create a custom element via the discussed method:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <new-elem id="temp"> This is a Custom Element</new-elem>
<script type="text/javascript">
  class createElem extends HTMLElement {
    constructor() {
   connectedCallback() {
    if (this.hasAttribute("id")) { = "blue" = "none"
   customElements.define("new-elem", createElem)

In the above code snippet, apply the below-given steps:

  • Create a custom element named “new-elem” including the hyphen comprising an “id” and the stated message.
  • Now, create a class named “createElem” that extends the “HTMLElement” interface.
  • This inheritance ensures that the functionalities added to the class become a part of the element’s DOM interface.
  • This class is defined to associate the custom element with the custom properties and attributes.
  • In its definition, it is considered a good practice to add a class constructor to the element’s class. Also, include the “super()” keyword to inherit all the HTMLElement methods, attributes, and properties.
  • After that, the “connectedCallback()” method will be invoked when the element connects to the DOM.
  • Here, it is being analyzed that if the element comprises the “id” attribute, change its background color and pointer event.
  • Finally, apply the “customElements.define()” method that creates the custom element specified as its first argument and the latter argument corresponds to the element’s class.


However, this custom element can also be appended with a normal i.e., non-custom element via the following code line below the specified custom element i.e., between “<body>” and “<script>” tags:

<h3>This is a Non-Custom Element</h3>



To create custom HTML elements with JavaScript, the “customElements.define()” method is used with the custom tag to be created and a JavaScript class that extends the base “HTMLElement” interface. This write-up discussed the approach for creating custom HTML elements in JavaScript.

About the author

Umar Hassan

I am a Front-End Web Developer. Being a technical author, I try to learn new things and adapt with them every day. I am passionate to write about evolving software tools and technologies and make it understandable for the end-user.