custom Element.define event code example

Example 1: custom event js

const eventDetails = {
  'id': elemId
}
document.dispatchEvent (
  new CustomEvent('myCustomEvent', {'detail': eventDetails})
)

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

Example 3: user attributes for custom elemets

get value() {
  return this.getAttribute('value');
}

set value(newValue) {
  this.setAttribute('value', newValue);
}