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 vs frameworks¶
Web Components zijn een evolutie van de MVC-structuur. Bij Web Components zit de Controller en View in één bestand. Dat is een gebruikelijk patroon voor een hoop frameworks zoals React en Vue! In tegenstelling tot de laatst genoemde hoef je voor Web Components geen extra libraries te importeren, omdat ze onderdeel zijn van de standaard code in de meeste browsers.