Web Components skup su izvornih API-ja preglednika za izgradnju ponovno iskoristivih, enkapsuliranih prilagođenih HTML elemenata — neovisni o okviru i temeljeni na standardima. Tri tehnologije se kombiniraju:
Web Components skup su izvornih API-ja preglednika za izgradnju ponovno iskoristivih, enkapsuliranih prilagođenih HTML elemenata — neovisni o okviru i temeljeni na standardima. Tri tehnologije se kombiniraju:
<template>, <slot>) — inertna, ponovno iskoristiva oznaka.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>
Stilovi unutar shadow roota su dosegom ograničeni — CSS stranice ne može doći do njih, a CSS komponente ne može procuriti van. Ovo izvorno rješava problem globalne CSS-a:
/* 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 vam omogućuju gradnju ponovno iskoristivих widgeta koji rade u bilo kojem okviru (ili bez njega) s pravom enkapsulacijom stilova/DOM-a — idealno za design sustave i mikro-frontende dijeljene među timovima koji koriste različite stackove.
To je kako knjižnice poput Shoelace-a distribuiraju komponente neovisne o okviru.
Kompromisi (opširan API, SSR/styling kompleksnost) znače da razvojni programeri aplikacija često i dalje preferiraju React/Vue, ali platformska primitiva je moćna i temeljena na standardima.