Web Components हे ब्राउজरचे मूळ API सेट आहे जो पुन्हा वापरण्यायोग्य, एनकॅप्सुलेटेड कस्टम HTML एलिमेंट तयार करण्यासाठी वापरला जातो — फ्रेमवर्कपासून स्वतंत्र आणि मानक-आधारित. तीन तंत्रज्ञान एकत्र होतात:
Web Components हे ब्राउজरचे मूळ API सेट आहे जो पुन्हा वापरण्यायोग्य, एनकॅप्सुलेटेड कस्टम HTML एलिमेंट तयार करण्यासाठी वापरला जातो — फ्रेमवर्कपासून स्वतंत्र आणि मानक-आधारित. तीन तंत्रज्ञान एकत्र होतात:
<template>, <slot>) — निष्क्रिय, पुन्हा वापरण्यायोग्य मार्कअप.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 root मधील शैली स्कोप्ड आहेत — पृष्ठाचा CSS अंदर पोहोचू शकत नाही, आणि घटकाचा CSS बाहेर लीक होऊ शकत नाही. हे ग्लोबल-CSS समस्या मूळतः सोडवते:
/* 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 तुम्हाला पुन्हा वापरण्यायोग्य विजेट तयार करण्यास अनुमती देते जे कोणही फ्रेमवर्कमध्ये (किंवा कोणत्याही नाही) खरी शैली/DOM एनकॅप्सुलेशनसह काम करतात — डिজाइन सिस्टम आणि मायक्रो-फ्रंटएंडसाठी आदर्श जे विविध स्टॅक वापरणार्या संघांमध्ये सामायिक केली जातात.
हीच पद्धत आहे जिद्वारे Shoelace सारखी लायब्ररी फ्रेमवर्क-अज्ञेयवादी घटक वितरित करतात.
ट्रेड-ऑफ (वर्बोज API, SSR/शैलीकरण जटिलता) म्हणजे अॅप डेव्हलपर अजूनही React/Vue पसंत करतात, परंतु प्लॅटफॉर्म प्राथमिक शक्तिशाली आणि मानक-आधारित आहे.