Web Components is sraith de APIs nádúrtha an bhrabhsálaigh chun eilimintí saincheaptha HTML in-athusoiatable, foluain a thógáil — neamhspleách ar fhreamhwork agus bunaithe ar chaighdeáin. Cuirtear trí thechneolaíocht i bhfeidhm:
Web Components is sraith de APIs nádúrtha an bhrabhsálaigh chun eilimintí saincheaptha HTML in-athusoiatable, foluain a thógáil — neamhspleách ar fhreamhwork agus bunaithe ar chaighdeáin. Cuirtear trí thechneolaíocht i bhfeidhm:
<template>, <slot>) — marcanna neamhghníomhach, in-athusoiatable.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>
Tá na stíleanna taobh istigh den fhréamh scáile foluain — ní féidir le CSS an leathanaigh a bhaint isteach, agus ní féidir le CSS an chomhpháirt a scaoileadh amach. Réitíonn sé an fhadhb CSS-dhomhanda go nádúrtha:
/* 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"]; }
Ligean do Web Components duit giuirléidí in-athusoiatable a thógáil a oibríonn in aon fhramhwork (nó gan ceann ar bith) le foluain stíle/DOM fíor — idéalach do chórais dhearaidh agus micrea-thosaigh a roinnt ar fhorgéimh ag úsáid stoca difriúla.
Is iad a bhealach a sheolann leabharlanna ar nós Shoelace comhpháirt neamhspleách ar fhramhwork.
Ciallaíonn na fúltachais (API foclóir, casta SSR/stíleanna) go bhfuil forbraitheoirí app go minic fós i bhfabhar React/Vue, ach tá an primitíf ardáin cumhachtach agus bunaithe ar chaighdeáin.