वेब कॉम्पोनेंट को अलग-अलग ब्राउज़र पर इस्तेमाल करने की सुविधा मिल रही है. साथ ही, इसकी कम्यूनिटी तेज़ी से बढ़ रही है. इसके अलावा, वेब कॉम्पोनेंट का एक नया कैटलॉग भी उपलब्ध है, ताकि आपको अपनी ज़रूरत के हिसाब से कॉम्पोनेंट मिल सके.
क्या आपको कभी ऐसा JavaScript कॉम्पोनेंट बनाना है जिसे कई प्रोजेक्ट में आसानी से इस्तेमाल किया जा सके या अन्य डेवलपर के साथ शेयर किया जा सके, भले ही वे किसी भी JavaScript फ़्रेमवर्क का इस्तेमाल करते हों? वेब कॉम्पोनेंट आपके लिए सही हो सकते हैं.
वेब कॉम्पोनेंट, वेब प्लैटफ़ॉर्म की नई सुविधाओं का एक सेट है. इनकी मदद से, अपने एचटीएमएल एलिमेंट बनाए जा सकते हैं. हर नए कस्टम एलिमेंट में <my-button> जैसा कस्टम टैग हो सकता है. साथ ही, इसमें पहले से मौजूद एलिमेंट की सभी सुविधाएं भी हो सकती हैं. कस्टम एलिमेंट में प्रॉपर्टी और मेथड हो सकते हैं. साथ ही, इन्हें इवेंट ट्रिगर करने और उनका जवाब देने के लिए इस्तेमाल किया जा सकता है. इसके अलावा, इनमें अपने हिसाब से स्टाइल और डीओएम ट्री भी हो सकते हैं, ताकि इनका लुक और स्टाइल अलग दिखे.
वेब कॉम्पोनेंट, प्लैटफ़ॉर्म पर आधारित, कम लेवल के कॉम्पोनेंट मॉडल उपलब्ध कराते हैं. इनकी मदद से, फिर से इस्तेमाल किए जा सकने वाले एलिमेंट बनाए और शेयर किए जा सकते हैं. इन एलिमेंट में, खास बटन से लेकर, datepicker जैसे जटिल व्यू तक शामिल हैं. वेब कॉम्पोनेंट, प्लैटफ़ॉर्म एपीआई के साथ बनाए जाते हैं. इनमें बेहतरीन एन्कैप्सलमेंट प्राइमिटिव शामिल होते हैं. इसलिए, इन कॉम्पोनेंट का इस्तेमाल अन्य JavaScript लाइब्रेरी या फ़्रेमवर्क में भी किया जा सकता है, जैसे कि वे स्टैंडर्ड डीओएम एलिमेंट हों.
हो सकता है कि आपने वेब कॉम्पोनेंट के बारे में पहले सुना हो - वेब कॉम्पोनेंट स्पेसिफ़िकेशन का एक पुराना वर्शन - v0 - Chrome 33 में शिप किया गया था.
आज, ब्राउज़र वेंडर के बीच बड़े पैमाने पर सहयोग की वजह से, वेब कॉम्पोनेंट स्पेसिफ़िकेशन के अगले-जीनरेक्शन - v1 - को ज़्यादा से ज़्यादा मदद मिल रही है. Chrome, वेब कॉम्पोनेंट बनाने वाले दो मुख्य स्पेसिफ़िकेशन के साथ काम करता है. ये स्पेसिफ़िकेशन हैं - शैडो डोम और कस्टम एलिमेंट. ये स्पेसिफ़िकेशन, Chrome 53 और Chrome 54 में उपलब्ध हैं. Safari ने Safari 10 में शैडो डीओम v1 के लिए सहायता उपलब्ध कराई है. साथ ही, WebKit में पसंद के मुताबिक बनाए गए एलिमेंट v1 को लागू कर दिया है. फ़िलहाल, Firefox में शैडो DOM और कस्टम एलिमेंट का पहला वर्शन डेवलप किया जा रहा है. साथ ही, Edge के लिए शैडो DOM और कस्टम एलिमेंट, दोनों को रोडमैप में शामिल किया गया है.
v1 वर्शन का इस्तेमाल करके नया कस्टम एलिमेंट तय करने के लिए, बस एक नई क्लास बनाएं. यह क्लास, ES6 सिंटैक्स का इस्तेमाल करके HTMLElement को एक्सटेंड करती है. साथ ही, इसे ब्राउज़र के साथ रजिस्टर करें:
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
v1 के नए स्पेसिफ़िकेशन काफ़ी बेहतर हैं. हमने कस्टम एलिमेंट v1 और शैडो डीओएम v1 का इस्तेमाल करने के लिए ट्यूटोरियल उपलब्ध कराए हैं, ताकि आपको शुरू करने में मदद मिल सके.
webcomponents.org
वेब कॉम्पोनेंट कम्यूनिटी भी तेज़ी से बढ़ रही है. हमें खुशी है कि webcomponents.org साइट को अपडेट किया गया है. यह वेब कॉम्पोनेंट कम्यूनिटी का मुख्य प्लैटफ़ॉर्म है. इसमें डेवलपर के लिए एक इंटिग्रेटेड कैटलॉग भी शामिल है, ताकि वे अपने एलिमेंट शेयर कर सकें.
webcomponents.org साइट पर, वेब कॉम्पोनेंट के specs, अपडेट, और वेब कॉम्पोनेंट कम्यूनिटी से जुड़ा कॉन्टेंट मौजूद होता है. साथ ही, इसमें अन्य डेवलपर के बनाए गए ओपन-सोर्स एलिमेंट और एलिमेंट के कलेक्शन के लिए दस्तावेज़ भी दिखते हैं.
Google की Polymer जैसी लाइब्रेरी का इस्तेमाल करके, अपना पहला एलिमेंट बनाया जा सकता है. इसके अलावा, सीधे तौर पर लो-लेवल वेब कॉम्पोनेंट एपीआई का इस्तेमाल भी किया जा सकता है. इसके बाद, webcomponents.org पर अपना एलिमेंट पब्लिश करें.
कॉम्पोनेंट बनाने के लिए शुभकामनाएं!