Begrip: Custom element

Een custom element is een zelfgedefinieerd HTML-element waarvan de werking en UI volledig bepaald wordt door de programmeur. Het element kan, na registratie bij de browser, gebruikt worden als eender welk ander HTML-element.

// Een minimaal custom element.
class HelloWorld extends HTMLElement {
  static observedAttributes = ["foo"]

  constructor() {
    // Verplichte call naar de constructor van de superklasse.
    super()
  }
  
  // Wordt uitgevoerd nadat het element gekoppeld is.
  // Moet de UI opbouwen.
  connectedCallback() {
    const helloWorld = document.createElement('h1')
    helloWorld.innerText = 'Hello world!'
    
    // This verwijst hier naar een HTMLElement (want daarvan erven we over)
    this.appendChild(helloWorld)
  }
   
  // Wordt uitgevoerd als een attribuut van het element verandert.
  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
    console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}`);
  }
}

// Registreer een nieuw HTML element <hello-world></hello-world> bij de browser.
// De eerste parameter is de naam van het element, de tweede de constructor.
// De naam van het element moet een koppelteken bevatten.
customElements.define('hello-world', HelloWorld);

// Element kan opgeroepen worden als: <hello-world foo="someValue"></hello-world>