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