Web Components är en uppsättning inbyggda webbläsar-API:er för att bygga återanvändbara, inkapsulerade anpassade HTML-element — ramverksagnostiska och standardbaserade. Tre teknologier kombineras:
Web Components är en uppsättning inbyggda webbläsar-API:er för att bygga återanvändbara, inkapsulerade anpassade HTML-element — ramverksagnostiska och standardbaserade. Tre teknologier kombineras:
<template>, <slot>) — inert, återanvändbar märkning.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>
Stilarna inuti shadow root är begränsade — sidans CSS kan inte nå in, och komponentens CSS kan inte läcka ut. Detta löser det globala CSS-problemet inbyggt:
/* 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 låter dig bygga återanvändbara widgetar som fungerar i vilket ramverk som helst (eller inget alls) med verklig stil/DOM-inkapsulering — perfekt för designsystem och mikro-frontends delade mellan team som använder olika stackar.
Det är hur bibliotek som Shoelace levererar ramverksagnostiska komponenter.
Avvägningarna (verbös API, SSR/styling-komplexitet) innebär att applikationsutvecklare ofta fortfarande föredrar React/Vue, men plattformsprimitiven är kraftfull och standardbaserad.
Ett bibliotek med IT-intervjufrågor och detaljerade svar — från Junior till Senior.
Donera