Web Components so niz izvornih brskalnikovih API-jev za gradnjo ponovno uporabnih, enkapsuliranih poljubnih HTML elementov — neodvisni od ogrodja in na standardih temelječi. Tri tehnologije se kombinirajo:
Web Components so niz izvornih brskalnikovih API-jev za gradnjo ponovno uporabnih, enkapsuliranih poljubnih HTML elementov — neodvisni od ogrodja in na standardih temelječi. Tri tehnologije se kombinirajo:
<template>, <slot>) — neaktivna, ponovno uporabna 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>
Slogi v shadow root so omejeni — CSS strani se ne more vstopiti, in CSS komponente se ne more razširiti navzven. To rešuje problem globalnega CSS-ja izvirno:
/* 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 omogočajo gradnjo ponovno uporabnih gradnikov, ki delujejo v kateremkoli ogrodju (ali brez njega) s pravo enkapsulacijo slogov in DOM-a — idealno za sisteme oblikovanja in mikro-frontende, deljene med ekipami, ki uporabljajo različne sklope.
To je način, kako knjižnice, kot je Shoelace, pošiljajo komponente, neodvisne od ogrodja.
Kompromisi (besedljivi API, SSR/slogi kompleksnost) pomenijo, da razvijalci aplikacij pogosto še vedno raje izberejo React/Vue, vendar je platformska primitiva zmogljiva in na standardih temelječa.