JavaScript Academy · Les

Custom elements definiëren

Registreer elementen met de customElements-API.

Les 1 van 413 stappen

Custom elements definiëren is een gratis JavaScript Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat zijn aangepaste elementen?

Met aangepaste elementen kun je je eigen HTML-tags definiëren die door JavaScript-klassen worden ondersteund. In plaats van een wirwar van div-elementen te maken, bouw je een herbruikbare, zelfstandige component zoals <user-card>.

Ze maken deel uit van de standaard Web Components.
Ze werken rechtstreeks in browsers; er is geen raamwerk nodig.
De naam van een aangepast element moet een koppelteken bevatten (bijvoorbeeld my-button).

Het register customElements

De browser stelt een globaal register beschikbaar via window.customElements. Registreer een nieuwe tag door customElements.define(name, constructor) aan te roepen.

Nadat de tag is gedefinieerd, wordt elke overeenkomende tag in het document omgezet in een instantie van je klasse.

// Register a tag named 'hello-world'
customElements.define('hello-world', HelloWorld);

// After this, every <hello-world> in the page
// becomes an instance of the HelloWorld class.

HTMLElement uitbreiden

Een aangepast element is een klasse die extends HTMLElement. De basisklasse geeft je element alle standaardmogelijkheden van de DOM, zoals attributen, gebeurtenissen en opmaak.

Roep in de constructor altijd eerst super() aan, zodat het element goed wordt geïnitialiseerd.

class HelloWorld extends HTMLElement {
  constructor() {
    super(); // required, sets up the element
  }
}

customElements.define('hello-world', HelloWorld);

Inhoud weergeven

Binnen het element kun je this.innerHTML instellen of DOM-methoden gebruiken om inhoud op te bouwen. Een veelgebruikt patroon is om de inhoud weer te geven wanneer het element aan de pagina wordt gekoppeld.

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<p>Hello from a custom element!</p>';
  }
}

customElements.define('hello-world', HelloWorld);

Het element in HTML gebruiken

Gebruik je tag na registratie net als elk ingebouwd element. Je kunt de tag rechtstreeks in HTML-opmaak plaatsen of het element maken met document.createElement.

// In HTML:
// <hello-world></hello-world>

// Or in JavaScript:
const el = document.createElement('hello-world');
document.body.appendChild(el);

Regels voor de constructor

De constructor wordt uitgevoerd wanneer een instantie wordt gemaakt. Er gelden strikte regels:

Roep eerst super() aan.
Controleer of voeg hier geen attributen of kinderen toe.
Stel DOM-werk uit tot connectedCallback.

Gebruik de constructor alleen voor de beginstatus en het instellen van gebeurtenislisteners.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0; // safe: just internal state
  }
}

customElements.define('counter-button', CounterButton);

Gedrag toevoegen

Omdat je element een echte DOM-node is, kun je gebeurtenislisteners koppelen en de inhoud ervan bijwerken als reactie op interactie.

class CounterButton extends HTMLElement {
  constructor() {
    super();
    this.count = 0;
  }
  connectedCallback() {
    this.textContent = 'Clicked 0 times';
    this.addEventListener('click', () => {
      this.count++;
      this.textContent = 'Clicked ' + this.count + ' times';
    });
  }
}
customElements.define('counter-button', CounterButton);

Vereiste voor een koppelteken

Namen van aangepaste elementen moeten een koppelteken bevatten. Zo kunnen ze nooit botsen met huidige of toekomstige ingebouwde HTML-elementen.

my-widget is geldig.
mywidget is ongeldig en geeft een foutmelding.
Namen zijn niet hoofdlettergevoelig, maar worden in kleine letters geschreven.

// Valid:
customElements.define('app-header', AppHeader);

// Invalid - throws SyntaxError (no hyphen):
// customElements.define('appheader', AppHeader);

whenDefined en get

Twee nuttige methoden van het register:

customElements.get(name) geeft de constructor terug, of undefined als deze niet is geregistreerd.
customElements.whenDefined(name) geeft een Promise terug die wordt opgelost zodra het element is gedefinieerd.

customElements.whenDefined('hello-world').then(() => {
  console.log('hello-world is ready to use');
});

const Ctor = customElements.get('hello-world');

Slechts één keer definiëren

Elke naam kan maar één keer worden geregistreerd. Als je define aanroept met een al gebruikte naam, geeft dat een foutmelding. Voorkom dubbele registratie in gedeelde modules.

if (!customElements.get('hello-world')) {
  customElements.define('hello-world', HelloWorld);
}

Waarom aangepaste elementen belangrijk zijn

Aangepaste elementen bieden frameworkonafhankelijke, ingekapselde en herbruikbare UI. Ze:

standaardiseren hergebruik van componenten in elke technologiestack.
integreren met de eigen levenscyclus van de browser.
werken vanzelf goed samen met Shadow DOM en templates (die later aan bod komen).

Korte controle

Controleer je begrip van het definiëren van aangepaste elementen.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt geleerd hoe je aangepaste elementen definieert:

customElements.define(name, class) registreert een tag.
De klasse extends HTMLElement en roept eerst super() aan.
Namen moeten een koppelteken bevatten.
Geef inhoud weer in connectedCallback, niet in de constructor.
Met get en whenDefined kun je de registratiestatus controleren.

Vervolgens bekijken we de volledige levenscyclus van een aangepast element.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Custom elements definiëren” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Custom elements definiëren”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Custom elements definiëren”?

Registreer elementen met de customElements-API. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Custom elements definiëren”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy