which allows developers to create their own custom HTML tags. code example

Example 1: custom html tags

//HTML
<my-tag id="yourId" some-attr="someval"></my-tag>

//CSS
my-tag {
	color: red;
}

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