Web components zijn een browserstandaard om je eigen herbruikbare interface-elementen te maken, zoals een eigen <rating-stars> of <search-box> tag. Elk element verpakt zijn eigen HTML, CSS en gedrag in één onderdeel dat je op elke pagina, in elk framework, kunt neerzetten waarna het gewoon werkt.
Zie ze als LEGO-blokjes. Een blokje heeft een vaste vorm en noppen, en je klikt het in talloze bouwwerken zonder het blokje zelf te veranderen. Een web component werkt net zo: definieer het één keer en hergebruik het over pagina’s en projecten heen zonder telkens de HTML, styling en logica opnieuw te schrijven. De shadow DOM houdt de binnenkant van elk blokje afgesloten, zodat de CSS in het ene component nooit per ongeluk een ander component herstijlt.
Het grote voordeel is onafhankelijkheid. Omdat ze bij de browser horen en niet aan één library vastzitten, blijven web components werken zelfs als een team later van framework wisselt. Daardoor zijn ze handig voor designsystemen die over meerdere producten worden gedeeld, waar consistentie belangrijker is dan welke tool dan ook.
Ze passen natuurlijk bij atomic design, waar kleine onderdelen samen grotere vormen. Een <search-box> kan zelf een eigen knop en invoerveld bevatten, elk een eigen component, genest als blokjes in blokjes.
Het is alleen niet het antwoord op alles. Diezelfde isolatie die een component beschermt, kan een gedeelde thema-aanpak en gedeelde state lastiger maken dan in een framework dat daarvoor is gebouwd, en de tooling eromheen is magerder dan die van React of Vue. Voor één app die nooit van framework wisselt, zijn gewone framework-componenten vaak simpeler. Web components komen tot hun recht als hergebruik die grenzen moet oversteken.
Bij TopDevs gebruiken we web components als een klant meerdere sites of apps heeft die dezelfde knoppen, formulieren en widgets moeten delen zonder drie aparte kopieën te onderhouden.
