Web Components jerin native browser APIs ne don gina aiki da elements na HTML da za'a iya sake amfani su — ba ma buƙa framework kuma juna daidai. Fasali uku suka haɗa:
Web Components jerin native browser APIs ne don gina aiki da elements na HTML da za'a iya sake amfani su — ba ma buƙa framework kuma juna daidai. Fasali uku suka haɗa:
<template>, <slot>) — markup da ba a amfani.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>
Styles da ke cikin shadow root suna da iyaka — CSS na shafin ba zai iya shiga, kuma CSS na component ba zai iya wuce. Wannan ya warware matsalar global-CSS ta asali:
/* 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 suna ba ka damar gina widgets da za'a iya sake amfani su da suke aiki a duk framework (ko babu) tare da tunani/DOM encapsulation na gaske — mabamayar don systems na design da micro-frontends da aka rarraba ga jama'a da ke amfani da wasu sassan.
Su ne yadda libraries kamar Shoelace suke aika components ba a buƙa framework.
Truckoffs (API mai farin hali, SSR/styling rikice-riki) nasu niyya cewa developers na app har yanzu suna fi so React/Vue, amma primitive na platform yana da iko kuma juna daidai.