Web Components ni seti ya API-za asilia za kasha kwa kujenga vipengele vya HTML vya kawaida vya kujirudia, vilivyofungwa — visivyo na ujinga wa mfumo na kulingana na kiwango. Teknolohia tatu zinaunganisha:
Web Components ni seti ya API-za asilia za kasha kwa kujenga vipengele vya HTML vya kawaida vya kujirudia, vilivyofungwa — visivyo na ujinga wa mfumo na kulingana na kiwango. Teknolohia tatu zinaunganisha:
<template>, <slot>) — alama isiyo na wazi, inayoweza kujirudia.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>
Mitindo ndani ya shadow root ni mipango — CSS ya ukurasa haiwezi kuingia ndani, na CSS ya kipengele haiwezi kuogala nje. Hii hutatua tatizo la CSS ya ulimwengu asilia:
/* 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 hukuruhusu kujenga vidget vya kujirudia vinavyofanya kazi katika mfumo wowote (au hakuna) na ufungaji halisi wa mtindo/DOM — bora kwa mifumo ya muundo na micro-frontends inayoshirikiwa kati ya timu zinazotumiaz rafu tofauti.
Ni jinsi ambayo vituo vya maktaba kama Shoelace hutuma vipengele visivyo na ujinga wa mfumo.
Usuluhisha (API ya mavumbi, SSR/styling utata) inamaanisha waendelezi wa programu bado kwa kawaida hupendelea React/Vue, lakini jambazi la jukwaa ni kali na kulingana na kiwango.