How to Create Custom HTML Elements code example

Example 1: create custom html element

class className extends HTMLElement{//or any othere element you want
	contructor(){
    super()//to call the parent class contructor
      this._root = this.attachShadow({mode:"open"})//attach a shadow dom for easy manipulation
      connectedCallback(){
      	//runs code everytime the element is used on the html page
      }
      disconnectedCallback(){
      	//runs everytime the element is removed from the dom
      }
      adoptedCallback(){
      	//runs everytime the element is moved
      }
      attributeChangedCallback(nameOfAtr, oldValue, newValue){
      	//runs everytime the elements attributes are changed in any way
      }
    }
}
window.customElements.define("what you want your tag name to be",class name of tag)//to add the custom element and be able to add in in html

Example 2: create custum tage html

The document.registerElement() method is used to create a custom HTML element. This should be passed as the name of your custom element along with an (optional) object that defines the API.

var XTreehouseElement = document.registerElement('x-treehouse');
document.body.appendChild(new XTreehouseElement());

<x-treehouse></x-treehouse>