Web Components jsou sada nativních API prohlížeče pro vytváření opakovaně použitelných a zapouzdřených vlastních prvků HTML — nezávislé na frameworku a založené na standardech. Kombinují tři technologie:
Web Components jsou sada nativních API prohlížeče pro vytváření opakovaně použitelných a zapouzdřených vlastních prvků HTML — nezávislé na frameworku a založené na standardech. Kombinují tři technologie:
<template>, <slot>) — neaktivní, opakovaně použitelný 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>
Styly uvnitř shadow root jsou vymezeny — CSS stránky se nemůže dostat dovnitř a CSS komponenty nemůže uniknout ven. Toto nativně řeší problém globálního CSS:
/* 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 vám umožňují vytvářet opakovaně použitelné widgety, které fungují v kterémkoliv frameworku (nebo bez něj) se skutečným zapouzdřením stylů a DOM — ideální pro designové systémy a mikro-frontendy sdílené mezi týmy používajícími různé technologické stacky.
Takto knihovny jako Shoelace dodávají komponenty nezávislé na frameworku.
Kompromisy (podrobné API, složitost SSR/stylů) znamenají, že vývojáři aplikací stále často preferují React/Vue, ale primitivum platformy je výkonné a založené na standardech.