Web Components

Web Components is een techniek in moderne browsers om eigen HTML-element te definiëren, bijvoorbeeld <my-awesome-custom-div></my-awesome-custom-div>.

Het mooie van Web Components is dat ze ondersteuning bieden voor de Shadow DOM. Dat klinkt spannend, maar het houdt in dat een webpagina waar een Web Component op staat, geen invloed kan uitoefenen op de styling en logica. Je kunt een Web Component dus als een opzichzelfstaande applicatie beschouwen die werkt zoals het werkt.

Neem bijvoorbeeld het standaard input-element in de browser, en dan specifiek degene voor het uploaden van bestanden. Het element heeft zelf bepaald dat er een tekst is die aangeeft welk bestand er geupload wordt en dat er een knop is die een scherm opent om je bestand te kiezen. Jij kunt met JavaScript en CSS vrijwel geen invloed op dit element uitoefenen. Wil je de knop rood met blauwe tekst hebben? Pech gehad! Dat is niet helemaal waar, want browsers geven je trucjes om dit wel te kunnen, maar dat zijn in essentie “hacks” en werken ook niet altijd in alle andere browsers.

Hoe dan ook, zo’n input-element is dus in essentie ook een Web Component, waarbij de tekst en knop in de Shadow DOM zitten, zodat jij er geen invloed op kan uitoefenen.

Web Components tijdens dit project

Web Components zijn een evolutie van de MVC-structuur waar je al eerder mee hebt moet werken.

Bij Web Components zit de Controller en View in één bestand. Voelt wellicht wat onwennig als je net hebt geleerd dat je deze dingen moet scheiden, maar het is een gebruikelijk patroon voor een hoop frameworks zoals React en Vue!

Om het gebruik van Web Components toch wat meer te laten lijken op hoe jullie tijdens semester 1 hebben leren werken in de frontend, komt het startproject standaard met drie Template literal extensions`. Dit zijn:

• css
• html
• htmlArray

Hiermee kun je strings laten behandelen als respectievelijk CSS en HTML Elementen. Een voordeel van deze uitbreidingen is dat je bijvoorbeeld een html-string direct manipuleren met querySelector. Zie onder andere de RootComponent en CanvasComponent voor een voorbeeld van het gebruik!