Web Components ovat joukko natiiveja selainsovellusliittymiä uudelleenkäytettävien, kapseloiduissa mukautettujen HTML-elementtien rakentamiseen — kehys-agnostisia ja standardiperustaisia. Kolme tekniikkaa yhdistyvät:
Web Components ovat joukko natiiveja selainsovellusliittymiä uudelleenkäytettävien, kapseloiduissa mukautettujen HTML-elementtien rakentamiseen — kehys-agnostisia ja standardiperustaisia. Kolme tekniikkaa yhdistyvät:
<template>, <slot>) — passiivinen, uudelleenkäytettävä merkintä.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>
Shadow rootin sisäiset tyylit ovat rajattuja — sivun CSS ei pääse sisälle, ja komponentin CSS ei vuo ulos. Tämä ratkaisee globaalin CSS-ongelman natiivisti:
/* 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 antavat sinulle mahdollisuuden rakentaa uudelleenkäytettäviä pienoissovelluksia, jotka toimivat millä tahansa kehyksellä (tai ilman sitä) todellisella tyyli-/DOM-kapselloinnilla — ihanteellinen suunnittelujärjestelmille ja mikrofrontille, joita jaetaan eri tekniikkapinoita käyttävien tiimien välillä.
Niin kirjastot kuten Shoelace toimittavat kehys-agnostisia komponentteja.
Kompromissit (yksityiskohtainen API, SSR/tyylin monimutkaisuus) tarkoittavat, että sovellusohjelmoijat usein silti pitävät enemmän Reactista/Vuesta, mutta alustaprimitiivi on tehokas ja standardiperustainen.