Web Components a böngészőben natívan elérhető API-k egy halmaza, amelyek felhasználható, beágyazott egyéni HTML elemek létrehozására — keretrendszer-független és szabványokon alapul. Három technológia kombinálódik:
Web Components a böngészőben natívan elérhető API-k egy halmaza, amelyek felhasználható, beágyazott egyéni HTML elemek létrehozására — keretrendszer-független és szabványokon alapul. Három technológia kombinálódik:
<template>, <slot>) — inert, felhasználható kód.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>
A shadow root-on belüli stílusok hatóköri — az oldal CSS-e nem érhet be, és az komponens CSS-e nem szivároghat ki. Ez natívan megoldja a globális CSS problémát:
/* 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"]; }
A Web Components lehetővé teszik, hogy felhasználható widgeteket építsünk, amelyek bármely keretrendszerben (vagy anélkül is) működnek valódi stílus/DOM beágyazással — ideális tervezési rendszerekhez és mikro-frontendelekhez, amelyeket különböző technológiákat használó csapatok között osztanak meg.
Ez az a módszer, ahogy a Shoelace-hez hasonló könyvtárak keretrendszer-független komponenseket szállítanak.
A kompromisszumok (bőbeszédű API, SSR/stílus összetettség) azt jelentik, hogy az alkalmazásfejlesztők továbbra is inkább a React/Vue-t preferálják, de a platform primitív hatékony és szabványokon alapul.