M

MLOG

Nederlands

Ontdek de kracht van Web Components, met een focus op Custom Elements, voor het bouwen van herbruikbare en ingekapselde UI-componenten voor diverse webapplicaties.

Web Components: Een diepgaande duik in Custom Elements

Web Components vertegenwoordigen een belangrijke vooruitgang in webontwikkeling en bieden een gestandaardiseerde manier om herbruikbare en ingekapselde UI-componenten te creëren. Van de kerntechnologieën die Web Components vormen, springen Custom Elements eruit als de hoeksteen voor het definiëren van nieuwe HTML-tags met aangepast gedrag en rendering. Deze uitgebreide gids duikt in de complexiteit van Custom Elements en verkent hun voordelen, implementatie en best practices voor het bouwen van moderne webapplicaties.

Wat zijn Web Components?

Web Components zijn een set webstandaarden waarmee ontwikkelaars herbruikbare, ingekapselde en interoperabele HTML-elementen kunnen creëren. Ze bieden een modulaire benadering van webontwikkeling, waardoor het mogelijk wordt om aangepaste UI-componenten te maken die gemakkelijk kunnen worden gedeeld en hergebruikt in verschillende projecten en frameworks. De kerntechnologieën achter Web Components zijn:

Custom Elements begrijpen

Custom Elements vormen het hart van Web Components en stellen ontwikkelaars in staat om het HTML-vocabulaire uit te breiden met hun eigen elementen. Deze custom elements gedragen zich als standaard HTML-elementen, maar kunnen worden aangepast aan specifieke applicatiebehoeften, wat zorgt voor meer flexibiliteit en code-organisatie.

Custom Elements definiëren

Om een custom element te definiëren, gebruikt u de customElements.define()-methode. Deze methode accepteert twee argumenten:

  1. De elementnaam: Een string die de naam van het custom element vertegenwoordigt. De naam moet een koppelteken (-) bevatten om conflicten met standaard HTML-elementen te vermijden. Bijvoorbeeld, my-element is een geldige naam, terwijl myelement dat niet is.
  2. De elementklasse: Een JavaScript-klasse die HTMLElement uitbreidt en het gedrag van het custom element definieert.

Hier is een basisvoorbeeld:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = 'Hello, World!';
  }
}

customElements.define('my-element', MyElement);

In dit voorbeeld definiëren we een custom element met de naam my-element. De MyElement-klasse breidt HTMLElement uit en stelt in de constructor de inner HTML van het element in op "Hello, World!".

Lifecycle Callbacks van Custom Elements

Custom elements hebben verschillende lifecycle callbacks waarmee u code kunt uitvoeren in verschillende stadia van de levenscyclus van het element. Deze callbacks bieden mogelijkheden om het element te initialiseren, te reageren op attribuutwijzigingen en bronnen op te schonen wanneer het element uit de DOM wordt verwijderd.

Hier is een voorbeeld dat het gebruik van lifecycle callbacks demonstreert:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({mode: 'open'});
  }

  connectedCallback() {
    this.shadow.innerHTML = `
Connected to the DOM!
`;
    console.log('Element connected');
  }

  disconnectedCallback() {
    console.log('Element disconnected');
  }

  static get observedAttributes() { return ['data-message']; }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'data-message') {
      this.shadow.innerHTML = `
${newValue}
`;
    }
  }
}

customElements.define('my-element', MyElement);

In dit voorbeeld logt de connectedCallback() een bericht naar de console en stelt de inner HTML van het element in wanneer het met de DOM is verbonden. De disconnectedCallback() logt een bericht wanneer het element wordt losgekoppeld. De attributeChangedCallback() wordt aangeroepen wanneer het data-message-attribuut verandert, en werkt de inhoud van het element dienovereenkomstig bij. De observedAttributes getter specificeert dat we wijzigingen in het data-message-attribuut willen observeren.

Shadow DOM gebruiken voor inkapseling

Shadow DOM biedt inkapseling voor web components, waardoor u een aparte DOM-boom voor een component kunt creëren die geïsoleerd is van de rest van de pagina. Dit betekent dat stijlen en scripts die binnen de Shadow DOM zijn gedefinieerd, de rest van de pagina niet beïnvloeden, en vice versa. Deze inkapseling helpt conflicten te voorkomen en zorgt ervoor dat uw componenten zich voorspelbaar gedragen.

Om Shadow DOM te gebruiken, kunt u de attachShadow()-methode op het element aanroepen. Deze methode accepteert een optie-object dat de modus van de Shadow DOM specificeert. De mode kan 'open' of 'closed' zijn. Als de modus 'open' is, kan de Shadow DOM vanuit JavaScript worden benaderd via de shadowRoot-eigenschap van het element. Als de modus 'closed' is, kan de Shadow DOM niet vanuit JavaScript worden benaderd.

Hier is een voorbeeld dat het gebruik van Shadow DOM demonstreert:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      
      
This is inside the Shadow DOM.

    `;
  }
}

customElements.define('my-element', MyElement);

In dit voorbeeld koppelen we een Shadow DOM aan het element met mode: 'open'. Vervolgens stellen we de inner HTML van de Shadow DOM in om een stijl te bevatten die de kleur van paragrafen op blauw zet en een paragraafelement met wat tekst. De stijl die binnen de Shadow DOM is gedefinieerd, is alleen van toepassing op elementen binnen de Shadow DOM en heeft geen invloed op paragrafen buiten de Shadow DOM.

Voordelen van het gebruik van Custom Elements

Custom Elements bieden verschillende voordelen voor webontwikkeling:

Praktische voorbeelden van Custom Elements

Laten we enkele praktische voorbeelden bekijken van hoe Custom Elements kunnen worden gebruikt om veelvoorkomende UI-componenten te bouwen.

Een eenvoudig tellercomponent

Dit voorbeeld laat zien hoe u een eenvoudig tellercomponent kunt maken met Custom Elements.

class Counter extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._count = 0;
    this.render();
  }

  connectedCallback() {
    this.shadow.querySelector('.increment').addEventListener('click', () => {
      this.increment();
    });
    this.shadow.querySelector('.decrement').addEventListener('click', () => {
      this.decrement();
    });
  }

  increment() {
    this._count++;
    this.render();
  }

  decrement() {
    this._count--;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      
      

        
        ${this._count}
        
      

    `;
  }
}

customElements.define('my-counter', Counter);

Deze code definieert een Counter-klasse die HTMLElement uitbreidt. De constructor initialiseert het component, koppelt een Shadow DOM en stelt de initiële telling in op 0. De connectedCallback()-methode voegt event listeners toe aan de increment- en decrement-knoppen. De increment()- en decrement()-methoden werken de telling bij en roepen de render()-methode aan om de weergave van het component bij te werken. De render()-methode stelt de inner HTML van de Shadow DOM in om de tellerweergave en knoppen te bevatten.

Een afbeeldingscarrouselcomponent

Dit voorbeeld laat zien hoe u een afbeeldingscarrouselcomponent kunt maken met Custom Elements. Voor de beknoptheid zijn de afbeeldingsbronnen placeholders en kunnen ze dynamisch worden geladen vanuit een API, een CMS of lokale opslag. De styling is ook geminimaliseerd.

class ImageCarousel extends HTMLElement {
 constructor() {
  super();
  this.shadow = this.attachShadow({ mode: 'open' });
  this._images = [
  'https://via.placeholder.com/350x150',
  'https://via.placeholder.com/350x150/0077bb',
  'https://via.placeholder.com/350x150/00bb77',
  ];
  this._currentIndex = 0;
  this.render();
 }

 connectedCallback() {
  this.shadow.querySelector('.prev').addEventListener('click', () => {
  this.prevImage();
  });
  this.shadow.querySelector('.next').addEventListener('click', () => {
  this.nextImage();
  });
 }

 nextImage() {
  this._currentIndex = (this._currentIndex + 1) % this._images.length;
  this.render();
 }

 prevImage() {
  this._currentIndex = (this._currentIndex - 1 + this._images.length) % this._images.length;
  this.render();
 }

 render() {
  this.shadow.innerHTML = `
  
  

  Carousel Image
  

  
  
  

  

  `;
 }
}

customElements.define('image-carousel', ImageCarousel);

Deze code definieert een ImageCarousel-klasse die HTMLElement uitbreidt. De constructor initialiseert het component, koppelt een Shadow DOM en stelt de initiële afbeeldingenarray en huidige index in. De connectedCallback()-methode voegt event listeners toe aan de 'vorige'- en 'volgende'-knoppen. De nextImage()- en prevImage()-methoden werken de huidige index bij en roepen de render()-methode aan om de weergave van het component bij te werken. De render()-methode stelt de inner HTML van de Shadow DOM in om de huidige afbeelding en knoppen te bevatten.

Best practices voor het werken met Custom Elements

Hier zijn enkele best practices om te volgen bij het werken met Custom Elements:

Custom Elements en Frameworks

Custom Elements zijn ontworpen om interoperabel te zijn met andere webtechnologieën en frameworks. Ze kunnen worden gebruikt in combinatie met populaire frameworks zoals React, Angular en Vue.js.

Custom Elements gebruiken in React

Om Custom Elements in React te gebruiken, kunt u ze gewoon renderen zoals elk ander HTML-element. Het kan echter nodig zijn om een ref te gebruiken om toegang te krijgen tot het onderliggende DOM-element en er rechtstreeks mee te communiceren.

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const myElementRef = useRef(null);

  useEffect(() => {
    if (myElementRef.current) {
      // Access the custom element's API
      myElementRef.current.addEventListener('custom-event', (event) => {
        console.log('Custom event received:', event.detail);
      });
    }
  }, []);

  return ;
}

export default MyComponent;

In dit voorbeeld gebruiken we een ref om toegang te krijgen tot het my-element custom element en er een event listener aan toe te voegen. Hiermee kunnen we luisteren naar custom events die door het custom element worden verzonden en dienovereenkomstig reageren.

Custom Elements gebruiken in Angular

Om Custom Elements in Angular te gebruiken, moet u Angular configureren om het custom element te herkennen. Dit kan worden gedaan door het custom element toe te voegen aan de schemas-array in de configuratie van de module.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Zodra het custom element is geregistreerd, kunt u het in uw Angular-templates gebruiken zoals elk ander HTML-element.

Custom Elements gebruiken in Vue.js

Vue.js ondersteunt ook standaard Custom Elements. U kunt ze rechtstreeks in uw templates gebruiken zonder speciale configuratie.

Vue zal het custom element automatisch herkennen en correct renderen.

Overwegingen voor toegankelijkheid

Bij het bouwen van Custom Elements is het cruciaal om rekening te houden met toegankelijkheid om ervoor te zorgen dat uw componenten door iedereen bruikbaar zijn, inclusief mensen met een handicap. Hier zijn enkele belangrijke overwegingen voor toegankelijkheid:

Internationalisering en lokalisatie

Bij het ontwikkelen van Custom Elements voor een wereldwijd publiek is het belangrijk om rekening te houden met internationalisering (i18n) en lokalisatie (l10n). Hier zijn enkele belangrijke overwegingen:

Conclusie

Custom Elements zijn een krachtig hulpmiddel voor het bouwen van herbruikbare en ingekapselde UI-componenten. Ze bieden verschillende voordelen voor webontwikkeling, waaronder herbruikbaarheid, inkapseling, interoperabiliteit, onderhoudbaarheid en prestaties. Door de best practices in deze gids te volgen, kunt u Custom Elements benutten om moderne webapplicaties te bouwen die robuust, onderhoudbaar en toegankelijk zijn voor een wereldwijd publiek. Naarmate webstandaarden blijven evolueren, zullen Web Components, inclusief Custom Elements, steeds belangrijker worden voor het creëren van modulaire en schaalbare webapplicaties.

Omarm de kracht van Custom Elements om de toekomst van het web te bouwen, één component tegelijk. Vergeet niet rekening te houden met toegankelijkheid, internationalisering en lokalisatie om ervoor te zorgen dat uw componenten door iedereen en overal bruikbaar zijn.