customize html components code example

Example: 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