Web Components huma sett ta' API nativi tal-browser għal bini ta' elementi HTML personalizati li jistgħu jintużaw mill-ġdid, mikkapsuljati — indipendenti mill-framework u bbażati fuq standards. Tliet teknoloġiji huma kombinati:
Web Components huma sett ta' API nativi tal-browser għal bini ta' elementi HTML personalizati li jistgħu jintużaw mill-ġdid, mikkapsuljati — indipendenti mill-framework u bbażati fuq standards. Tliet teknoloġiji huma kombinati:
<template>, <slot>) — markup inert u jintużaw mill-ġdid.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>
L-istili ġewwa r-root tal-ombre huma scoped — il-CSS tal-paġna ma tistax taraw ġewwa, u l-CSS tal-komponenti ma tistax titgħarraq barra. Dan jissolvi l-problema tal-CSS globali b'mod nativi:
/* 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 jippermettuk li tibni widgets li jistgħu jintużaw mill-ġdid li jaħdmu f'xi framework (jew ebda) b'kapsula vera tal-istil/DOM — ideali għat-sistemi tad-disinn u mikro-frontends maqsuma bejn timijiet li jużaw stacks differenti.
Hija kif libreriji bħal Shoelace jitolbu komponenti agnositiċi tal-framework.
It-trade-offs (API verbose, kumplessità SSR/styling) jiġifieri li l-imsaħħa tal-applikazzjonijiet għadhom jippreferwixxu React/Vue, iżda l-primitiv tal-platform hu qawwi u bbażat fuq standards.