How do you create custom HTML element?

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.

    class CustomElement extends HTMLElement {
      connectedCallback() {
        this.innerHTML = "This is a custom element";
      }
    }
    customElements.define("custom-element", CustomElement);

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

    <body>
         <custom-element>
    </body>