Webcomponents

Webcomponenten

Je kunt zelf HTML-elementen maken die je steeds opnieuw kunt gebruiken.

Web Components bestaan voornamelijk uit Custom Elements, Shadow DOM en Templates/Slots.

Custom element

Een handleiding die laat zien hoe je de functies van aangepaste elementen kunt gebruiken om eenvoudige webcomponenten te maken, en die ook ingaat op lifecycle callbacks en enkele andere meer geavanceerde functies. Die maak je door simpelweg een HTML tag te schrijven met een streepje er in.

Goed
<hello-world>

Fout
<helloworld>

CustomElementRegistry: Bevat functionaliteit met betrekking tot aangepaste elementen

CustomElementRegistry.define(): methode om nieuwe aangepaste elementen te registreren zodat ze vervolgens in uw document kunnen worden gebruikt.

CustomElementRegistry(): constructor kan worden gebruikt om scoped registries te creëren.

CustomElementRegistry.initialize(): methode koppelt een scoped registry aan een DOM-substructuur.

Window.customElements: Retourneert een verwijzing naar het globale CustomElementRegistryobject.

Document.customElementRegistry: De documenten die CustomElementRegistry bij het document horen.

Element.customElementRegistry: Het CustomElementRegistry element dat ermee geassocieerd is.

Life cycle callbacks

connectedCallback(): Wordt aangeroepen wanneer het aangepaste element voor het eerst aan de DOM van het document wordt gekoppeld.

disconnectedCallback(): Wordt aangeroepen wanneer het aangepaste element wordt losgekoppeld van de DOM van het document.

adoptedCallback(): Wordt aangeroepen wanneer het aangepaste element naar een nieuw document wordt verplaatst.

attributeChangedCallback(): Wordt aangeroepen wanneer een van de attributen van het aangepaste element wordt toegevoegd, verwijderd of gewijzigd.

Attributes gebruiken

Een van de coole dingen van Web Components is dat je informatie kunt meegeven.

<user-card
    name="Jan"
    job="Developer">
</user-card>

class UserCard extends HTMLElement {

    connectedCallback() {

        const name = this.getAttribute("name");
        const job = this.getAttribute("job");

        this.innerHTML = `
            <h2>${name}</h2>
            <p>${job}</p>
        `;
    }

}

customElements.define("user-card", UserCard);

Je kan dan verschillende dingen maken hier is het bijvoorbeeld cards

<user-card name="Jan" job="Developer"></user-card>

<user-card name="Lisa" job="Designer"></user-card>

<user-card name="Tom" job="Manager"></user-card>

Shadow DOM

Een handleiding die de basisprincipes van Shadow DOM behandelt en laat zien hoe je een Shadow DOM aan een element koppelt, elementen aan de Shadow DOM-structuur toevoegt, deze stylet en meer.

Zonder shadow DOM

Website
│
├── Header
├── Menu
├── User Card
├── Footer
│
└── Alle CSS kan elkaar beïnvloeden 

Met schadow DOM

Website
│
├── Header
├── Menu
│
├── <user-card>
│      │
│      └── Shadow DOM
│           ├── HTML
│           └── CSS
│
└── Footer

De HTML en CSS binnen je component zijn daardoor veel beter geïsoleerd van de rest van de pagina. Shadow DOM is juist bedoeld om onderdelen van een element af te schermen en stijl- of ID-conflicten te verminderen.

ShadowRoot: Vertegenwoordigt het rootknooppunt van een schaduw-DOM-subboom.

ShadowRoot.customElementRegistry: De waarde CustomElementRegistry die is gekoppeld aan de shadow root. Deze kan worden ingesteld via de customElementRegistryoptie van Element.attachShadow(), of later met behulp van CustomElementRegistry.initialize().

Element uitbreidingen
Uitbreidingen op de Elementinterface met betrekking tot shadow DOM:

• Deze Element.attachShadow() methode koppelt een schaduw-DOM-structuur aan het opgegeven element.
• De Element.shadowRoot eigenschap retourneert de shadow root die aan het opgegeven element is gekoppeld, of null nullals er geen shadow root is gekoppeld.

Relevante Node aanvullingen
Aanvullingen op de Nodeinterface met betrekking tot Shadow DOM:

• De Node.getRootNode() methode retourneert de root van het contextobject, die optioneel de shadow root kan bevatten als deze beschikbaar is.
• De Node.isConnected eigenschap retourneert een boolean die aangeeft of het knooppunt al dan niet (direct of indirect) verbonden is met het contextobject, bijvoorbeeld het Document object in het geval van de normale DOM, of het ShadowRoot in het geval van een shadow DOM.

Event uitbreidingen
Uitbreidingen op de Eventinterface met betrekking tot shadow DOM:

• Event.composed : Geeft aan true of de gebeurtenis zich over de grens van de shadow DOM naar de standaard DOM zal verspreiden, anders niet false.

• Event.composedPath : Retourneert het pad van de gebeurtenis (objecten waarop luisteraars worden aangeroepen). Dit omvat geen knooppunten in schaduwbomen als de schaduwwortel is aangemaakt met de ShadowRoot.mode optie 'gesloten'.

Templates/Slots (HTML symbolen)

Een handleiding die laat zien hoe je een herbruikbare HTML-structuur definieert met behulp van <div> ``<template> en <slot>``<div>-elementen, en hoe je die structuur vervolgens in je webcomponenten kunt gebruiken.