JS Coding Questions Logo
JS Coding Questions
#434💼 Interview💻 Code

How do you create custom HTML element?

Advertisement

728x90

The creation of custom HTML elements involves two main steps,

1. Define your custom HTML element: First you need to define some custom class by extending HTMLElement class.

After that define your component properties (styles,text etc) using connectedCallback method.

Note: The browser exposes a function called customElements.define inorder to reuse the element.

javascript
1class CustomElement extends HTMLElement {
2  connectedCallback() {
3  this.innerHTML = "This is a custom element";
4  }
5  }
6  customElements.define("custom-element", CustomElement);

2. Use custom element just like other HTML element: Declare your custom element as a HTML tag.

javascript
1<body>
2  <custom-element>
3  </body>

Advertisement

Responsive Ad
🎯 Practice NowRelated Challenge

JavaScript Coding Exercise 5

Test your knowledge with this interactive coding challenge.

Start Coding

Advertisement

728x90
434of476