Web Components er et sæt af native browser API'er til at bygge genanvendelige, indkapslet tilpassede HTML-elementer — framework-agnostisk og standardbaseret. Tre teknologier kombineres:
Web Components er et sæt af native browser API'er til at bygge genanvendelige, indkapslet tilpassede HTML-elementer — framework-agnostisk og standardbaseret. Tre teknologier kombineres:
<template>, <slot>) — inert, genanvendelig 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>
Stilarterne inde i shadow root er scopet — sidens CSS kan ikke nå ind, og komponentens CSS kan ikke lække ud. Dette løser det globale CSS-problem naturligt:
/* 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 lader dig bygge genanvendelige widgets, der fungerer i ethvert framework (eller ingen) med reel stil-/DOM-indkapsling — ideelt til designsystemer og mikrofrontends delt på tværs af teams, der bruger forskellige stacks.
Dette er, hvordan biblioteker som Shoelace sender framework-agnostiske komponenter.
Afvejningerne (udførligt API, SSR/styling-kompleksitet) betyder, at app-udviklere ofte stadig foretrækker React/Vue, men platformsprimitiven er kraftig og standardbaseret.