Table of Contents
Introduction
हेलो दोस्तों आज हम इस post में web components के बारे में जानगे की web components क्या है और उसका इस्तेमाल developer कैसे करते है अपनी web site और web application program में!.
Web Components क्या है?
Web components web platform API का एक set है जो आपको reusable और encapsulated HTML tag create करने की अनुमति देता है जिसका इस्तेमाल web application में किया जा सकता है!. वे developers को custom elements को create और define करने और उनके behavior and style को manage करने की अनुमति देता है!.
Web Components एक set of modern web technologies हैं jo हमें reusable, encapsulated, और custom HTML elements बनाने की facility देती हैं!.
यह technologies आपको अपने खुद के HTML tags create करने का option देती हैं, जो native elements जैसे <div>, <button>, etc. की तरह काम करते हैं, लेकिन इनके अंदर आप अपने specific styles और behavior define कर सकते हैं!.
Custom elements को create करने के लिए कुछ इस तरह define किया जाता है!
customElements.define("my-custom-element", MyCustomElement);
Web Components के Core Parts
Custom Elements
Custom Elements की मदद से हम अपने custom HTML elements बना सकते हैं!.
यह एक new HTML tag define करता है जो custom behavior के साथ काम करता है!. जैसे आप अपने project के लिए <my-card> और <my-button> जैसे tags बना सकते हैं!.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Web components</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script>
class MyCard extends HTMLElement {
constructor() {
super();
}
connectedCallback(){
this.innerHTML = `<style>
.card { padding: 20px; border: 1px solid #ccc; border-radius: 5px; }
h2 { color: blue; }
</style>
<div class="card">
<h2>${this.dataset.test}</h2>
<p>That is custom card component.</p>
</div>`;
}
}
customElements.define('my-card', MyCard);
class MyButton extends HTMLElement {
constructor() {
super();
}
connectedCallback(){
this.innerHTML = '<button>Click Me!</button>';
}
}
customElements.define('my-button', MyButton);
</script>
</head>
<body>
<main>
<h1>Cutom elements</h1>
<my-card data-test="My custom element 01"></my-card>
<my-card data-test="My custom element 2">
<div class="">This is custom element two</div>
</my-card>
<my-button></my-button>
</main>
</body>
</html>
ऊपर example में देख सकते है की हमने connectedCallback() method का इस्तेमाल करके custom element में data content को insert करा है!. और connectedCallback() एक lifecycle method है जो तब call होता है जब आपका custom element DOM mein insert होता है!.
इस method में हम HTML और CSS को dynamically inject करते हैं जो custom element के अंदर दिखाई देगी!. और
this.innerHTML के ज़रिये हम custom element के अंदर एक card structure define किया हैं!.
Shadow DOM
Shadow DOM एक encapsulation technique है जो web components को style और structure के level पर isolate करती है!.
इससे जो भी HTML और CSS आप component के अंदर उसे कर रहे हो, वह page के बाकी elements पर effect नहीं करेगा,
और ना ही कोई external styles component के अंदर interfere करेंगे!.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Web components</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script>
class MyCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = `
<style>
.card { padding: 20px; border: 1px solid #ccc; border-radius: 5px; }
h2 { color: blue; }
</style>
<div class="card">
<h2>Card Title</h2>
<p>Card content goes here.</p>
</div>`;
}
}
customElements.define('my-card', MyCard);
</script>
</head>
<body>
<main>
<h1>Cutom elements</h1>
<my-card></my-card>
</main>
</body>
</html>
इस code में, हमने एक custom element <my-card> बनाया, जो encapsulated styles और HTML के साथ एक card render करता है!. इस component को HTML में उसे करने का तरीका:
<my-card></my-card>
और example में देख सकते है Shadow DOM को attach (this.attachShadow({ mode: ‘open’ })) किया गया है, और अब children elements encapsulated DOM में insert करा हैं!.
HTML Templates
HTML templates हमें predefined HTML content बनाने की facility देती है जो जब तक explicitly DOM में नहीं डाला जाता, तब तक render नहीं होता. Templates को आप component के structure को define करने के लिए उसे कर सकते हैं!.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Web components</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
const template = document.getElementById('my-template');
console.log(template);
const clone = document.importNode(template.content, true);
document.body.appendChild(clone);
});
</script>
</head>
<body>
<main>
<template id="my-template">
<!-- Yeh content directly page par render nahi hoga -->
<div class="card">
<h3>Title</h3>
<p>This is a reusable card template.</p>
</div>
</template>
</main>
</body>
</html>
इस example में देख सकते है <template> tag के अंदर जो भी content है, वो render नहीं होगा जब तक आप specifically इससे JavaScript के ज़रिये DOM में insert ना करें. और आप देख सकते है हमने javascript का इस्तेमाल करके template tag के अंदर के content को DOM मैं insert कराया है!.
Custom element के lifecycle methods
Custom Elements के Lifecycle Methods एक इम्पोर्टेन्ट aspect है JavaScript में जब आप Web Components या Custom Elements बनाते हैं!.
यह methods आपको control देते हैं की कब और कैसे एक custom element अपने lifecycle के अलग-अलग stages में interact करे.
Custom Elements Lifecycle Methods जैसे की
connectedCallback()
जब custom element DOM में insert होता है, तोह यह method automatically call होती है. इस method को usually component की initial setup के लिए उसे किया जाता है, जैसे HTML inject करना, event listeners add करना, या data fetch करना!.
disconnectedCallback()
जब custom element DOM से remove होता है, तोह यह method call होती है. यह cleanup operations के लिए useful है, जैसे event listeners को remove करना, intervals को clear करना, या memory management के लिए!.
attributeChangedCallback(name, oldValue, newValue)
जब custom element के कोई observed attributes change होते हैं!, तोह यह method call होती है. यह attribute का naam और पुराणी और नई values pass करती है, और आप इससे element के behavior को dynamically update कर सकते हैं!.
adoptedCallback()
जब custom element एक document से दूसरे document में transfer होता है (jaise iframe के अंदर move किया जाये),
तोह यह method call होती है. यह उसे केस common नहीं है, लेकिन यह तब useful है जब आपको cross-document interactions handle करने हो!.
Custom elements के lifecycle methods आपको DOM interactions के different stages को control करने का option देते हैं, जिसे आप element को dynamically create, update, या remove कर सकते हैं. यह methods आपको complex web components बनाने में मदद करते हैं जो fully functional और responsive होते हैं!.
Web Components एक powerful tool हैं जो web development को modular, maintainable, और reusable बनाते हैं.
यह हमें encapsulated custom elements बनाने की flexibility देते हैं, जो किसी भी project में उसे किये जा सकते हैं और modern
web apps में code complexity को कम करते हैं!.
