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.
Syntax
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:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<new-elem id="temp"> This is a Custom Element</new-elem>
<script type="text/javascript">
class createElem extends HTMLElement {
constructor() {
super()
}
connectedCallback() {
if (this.hasAttribute("id")) {
this.style.backgroundColor = "blue"
this.style.pointerEvents = "none"
}}
}
customElements.define("new-elem", createElem)
</script>
</body>
</html>
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.
Output
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:
Output
Conclusion
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.
