Web Components to zestaw natywnych interfejsów API przeglądarki do budowania wielokrotnego użytku, hermetyzowanych custom HTML elementy — niezależne od frameworka i oparte na standardach. Trzy technologie działają razem:
Web Components to zestaw natywnych interfejsów API przeglądarki do budowania wielokrotnego użytku, hermetyzowanych custom HTML elementy — niezależne od frameworka i oparte na standardach. Trzy technologie działają razem:
<template>, <slot>) — nieaktywna, wielokrotnie użyteczna 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>
Style wewnątrz shadow root są scoped — CSS strony nie może się dostać do wewnątrz, a CSS komponentu nie może wyciekać na zewnątrz. To natywnie rozwiązuje problem globalnego 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 pozwalają na budowanie wielokrotnie użytecznych widgetów, które działają w jakimkolwiek frameworku (lub żadnym) z prawdziwą hermetyzacją style/DOM — idealne dla systemów projektowania i mikrofrontendów udostępnianych między zespołami używającymi różnych stosów technologicznych.
To sposób, w jaki biblioteki takie jak Shoelace dostarczają komponenty niezależne od frameworka.
Kompromisy (gadatliwy API, złożoność SSR/styling) oznaczają, że deweloperzy aplikacji nadal często preferują React/Vue, ale primityw platformy jest potężny i oparty na standardach.