Web Components zijn een set native browser-API's voor het bouwen van herbruikbare, ingekapselde custom HTML-elementen — framework-agnostisch en op standaarden gebaseerd. Drie technologieën werken samen:
Web Components zijn een set native browser-API's voor het bouwen van herbruikbare, ingekapselde custom HTML-elementen — framework-agnostisch en op standaarden gebaseerd. Drie technologieën werken samen:
<template>, <slot>) — inert, herbruikbare markup.class UserCard extends HTMLElement {
connectedCallback() { // lifecycle: runs when added to the page
const shadow = this.attachShadow({ mode: "open" }); // create shadow DOM
shadow.innerHTML = `
<style> h2 { color: blue; } </style>
<h2>${this.getAttribute("name")}</h2>
<slot></slot>
`;
}
}
customElements.define("user-card", UserCard); // name MUST contain a hyphen
<user-card name="Ann">Extra content goes in the slot</user-card>
De styles in de shadow root zijn scoped — de CSS van de pagina kan niet naar binnen, en de CSS van de component kan niet naar buiten lekken. Dit lost het global-CSS-probleem native op:
/* page CSS */ h2 { color: red; } /* does NOT affect the <h2> inside user-card */
connectedCallback() // added to DOM
disconnectedCallback() // removed from DOM (cleanup)
attributeChangedCallback(name, old, val) // an observed attribute changed
static get observedAttributes() { return ["name"]; }
Web Components laten je herbruikbare widgets bouwen die in elk framework (of geen) werken met echte style/DOM-inkapseling — ideaal voor design systems en micro-frontends die worden gedeeld door teams met verschillende stacks.
Zo verzenden bibliotheken zoals Shoelace framework-agnostische componenten.
De afwegingen (uitgebreide API, SSR/styling-complexiteit) betekenen dat app-ontwikkelaars vaak nog steeds de voorkeur geven aan React/Vue, maar de platformprimitieve is krachtig en op standaarden gebaseerd.