Over Webcomponenten

Een paar jaar terug (halverwege 2014) was er nogal wat opwinding over webcomponenten, of zoals de Engelse naam is: Web Components. Er zouden voor van alles en nog wat complete stukjes code komen die allerlei taken zouden kunnen uitvoeren op je website.
Een paar jaar later was de euforie verdwenen. Er waren maar weinig browsers die het ondersteunen. Dat maakte het onbruikbaar.
Inmiddels (April 2022) is de ondersteuning flink breder geworden. Behalve HTML-imports worden web-componenten helemaal of gedeeltelijk ondersteund door de meeste browsers, behalve Internet Explorer en Opera Mini.

Een webcomponent is een combinatie van HTML, JavaScript en CSS, verpakt als HTML-element

Bij webcomonenten zijn vier ""hoofdgroepen te onderscheiden:

• Custom elements. Dit is een API (Application Programming Interface), waarmee je je eigen HTML-elementen kunt maken. Een API is een set voorschriften die toegang geven tot een zekere functionaliteit, zonder dat de browser hoeft te 'weten' wat die functionaliteit inhoudt. Voorbeelden van gebruik van API's zijn de tags <canvas>, <audio> en <video>.
  Toepassing voor Custom built elements is mogelijk in alle grote browsers. Voor Safari zijn er beperkingen.
   
• Shadow DOM. Omsluit en verbergt het inwendige van een custom element in een genest (dus apart) document. Dit is het belangrijkste onderdeel van de webcomponenten technologie en tevens het lastigst om te implementeren, omdat het zo goed als onmogelijk is om vervangende code te schrijven voor als de API niet beschikbaar is.
  Het wordt door alle grote browsers ondersteund.
   
• Templates. Hiermee kun je HTML-data in een document opnemen. De content van een <template>-element wordt niet door de browser geïnterpreteerd. Plaatjes e.d. worden dus niet getoond. De content van eentemplate kan met JavaScript alsnog zichtbaar worden gemaakt.
  De <template>-tag wordt door alle grote browsers ondersteund.
   
• HTML Imports. Hier kun je een HTML-document importeren in het huidige document. Dit werkt met de tag <link rel="import" href="… …">.
  Het wordt door geen enkele browser meer ondersteund en is verdwenen uit de standaard.
  De aanpak voor deze functie is met behulp van JavaScript: import from file.js of met fetch().

Opmerking:
 
De web componenten-technologie heeft tot doel om de opbouw van webdocumenten verder te structureren. Het bereikt echter precies het tegenovergestelde. Door de mogelijkheid je eigen HTML-elementen te ontwikkelen wordt het moeilijker om code over te dragen aan iemand anders. Dat wordt versterkt doordat het moeilijk is om nieuwe elementen dusdanig te documenteren dat het gebruik ervan ondubbelzinnig duidelijk is.
Persoonlijk ben ik geen voorstander van deze ontwikkeling. Daarvoor is het risico van wildgroei in het ontstaan van nieuwe HTML-tags te groot.

• Bronnen:
   
• De HTML van morgen Webdesigner Magazine 77, (juni 2015) pag. 42-45.
   
• What happened to Web Components? Blog van Dr. Axel Rauschmayer.
  https://www.2ality.com/2015/08/web-component-status.html
   
• Can I use web component? Overzicht van ondersteuning van web componenten.
  https://caniuse.com/#search=web%20component
   
• Web Components Artikel op Wikipedia.
  https://en.wikipedia.org/wiki/Web_Components