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