Over Webcomponenten

Een aantal jaren 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 ondersteunden. Dat maakte het onbruikbaar.
Inmiddels wordt een deel van de oorspronkelijke specificatie door alle grote browsers ondersteund.

Het oorspronkelijke doel van webcomponenten was om de opbouw van webdocumenten verder te structureren. Het tegenovergestelde efect werd bereikt: Door de mogelijkheid om zelf elementen te definiëren zou er een brij van zelfbedachte elementen kunnen ontstaan, die de redelijk strakke HTML-structuur gemakkelijk zou kunnen verstoren.

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

In de oorspronkelijke specificatie van webcomonenten zijn vier "hoofdgroepen" te onderscheiden:

• Custom elements. Dit is een API (Application Programming Interface), waarmee je je eigen HTML-elementen kunt maken. Dit is uit de specificatie verwijderd. Het wordt door geen enkele browser meer ondersteund.
  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>.
   
• Shadow DOM. Omsluit en verbergt het inwendige van een API 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 er vervangende code voor te schrijven als de API niet beschikbaar is.
  Het wordt door alle 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 een template 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 gedeeltelijk vervangen door JavaScript modules.

• 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

Opmerking:
 
De term "webcomponent" wordt tegenwoordig niet meer gebruikt.