🧑🏻‍🤝‍🧑🏻 ☘️ 👙 वेब घटक - वेब का भविष्य 👨🏽‍⚕️ ⚽️ 🔇

कुछ समय बाद, यह स्पष्ट हो गया कि प्रोटोटाइप का मुख्य विचार दुनिया के साथ संघर्ष में आया था। ब्राउज़र निर्माताओं ने नए एपीआई जोड़कर जावास्क्रिप्ट के पुनरुद्धार का जवाब दिया, जिनमें से कई प्रोटोटाइप के कार्यान्वयन के साथ संघर्ष करते हैं।

- सैम स्टीफेंसन, प्रोटोटाइप के निर्माता। जेएस, यू आर नॉट योर कोड

ब्राउज़रों के निर्माता सामंजस्यपूर्ण रूप से कार्य करते हैं। नए एपीआई पर निर्णय ओपनसोर्स समुदायों में वर्तमान रुझानों को ध्यान में रखते हुए किया जाता है। चूंकि prototyp.js ने Array.prototype.forEach() , map() , आदि के उद्भव में योगदान दिया, HTMLElement.prototype.querySelector() और querySelectorAll() पर jquery प्रेरित डेवलपर्स।

क्लाइंट-साइड कोड अधिक जटिल और स्वैच्छिक हो रहा है। कई चौखटे उभर रहे हैं जो इस अराजकता को नियंत्रण में रखने में मदद करते हैं। बैकबोन , एम्बर , कोणीय और अन्य को स्वच्छ, मॉड्यूलर कोड लिखने में मदद करने के लिए बनाया गया है। आवेदन स्तर की रूपरेखा एक प्रवृत्ति है। उनकी भावना कुछ समय के लिए जेएस वातावरण में मौजूद रही है। आश्चर्य नहीं कि ब्राउज़रों के निर्माताओं ने इस पर ध्यान देने का फैसला किया।

वेब कंपोनेंट्स मानकों का एक ड्राफ्ट सेट है। यह प्रस्तावित और सक्रिय रूप से Google से लोगों द्वारा पदोन्नत किया गया था, लेकिन पहल पहले से ही मोज़िला में समर्थित थी। और माइक्रोसॉफ्ट। बस मजाक कर रहे हैं, Microsoft बिल्कुल शामिल नहीं है। समुदाय में राय विरोधाभासी हैं (टिप्पणियों, लेखों आदि को देखते हुए)।

मूल विचार प्रोग्रामर्स को विजेट बनाने देना है। दस्तावेज़ के टुकड़े जो दस्तावेज़ से अलग किए गए हैं, जिसमें वे एम्बेडेड हैं। HTML और JS API दोनों का उपयोग करके विजेट का उपयोग करना संभव है।

मैंने कुछ हफ़्ते के लिए नए एपीआई के साथ खेला और मुझे यकीन है कि किसी न किसी रूप में, जल्दी या बाद में, ये सुविधाएँ ब्राउज़र में होंगी। हालाँकि, क्रोम कैनरी में उनके कार्यान्वयन ने कभी-कभी मुझे (मुझे, और क्रोम कैनरी को) चकित कर दिया, लेकिन वेब कंपोनेंट मुझे लगता है कि उपकरण गायब था।

वेब घटक मानक में निम्नलिखित भाग होते हैं:

टेम्पलेट्स

HTML स्निपेट जिसे प्रोग्रामर भविष्य में उपयोग करने जा रहा है।

<template> टैग की सामग्री ब्राउज़र द्वारा पार्स की जाती है, लेकिन स्क्रिप्ट को निष्पादित करने और अतिरिक्त संसाधनों (छवियों, ऑडियो ...) को लोड करने का कारण नहीं बनती है जब तक कि हम इसे दस्तावेज़ में नहीं डालते।
छाया डोम

HTML एनकैप्सुलेशन टूल।

शैडो डोम आपको HTML तत्वों के आंतरिक प्रतिनिधित्व को बदलने की अनुमति देता है, बाहरी प्रतिनिधित्व को अपरिवर्तित छोड़ देता है। एक महान उदाहरण है <audio> और <video> तत्व। कोड में हम एक टैग लगाते हैं, और ब्राउज़र कई तत्वों (स्लाइडर्स, बटन, प्लेयर विंडो) को प्रदर्शित करता है। क्रोम में, ये और कुछ अन्य तत्व उपयोग करते हैं
छाया डोम।
कस्टम तत्व

कस्टम तत्व आपको अपने स्वयं के HTML तत्वों के लिए API बनाने और परिभाषित करने देते हैं। कभी अपने HTML में <menu> या <user-info> टैग होने का सपना देखा है?
आयात

अन्य फ़ाइलों से मार्कअप टुकड़े आयात करें।

वेब कंपोनेंट में अधिक भाग और छोटे भाग होते हैं। मैं अभी भी कुछ का उल्लेख नहीं करूंगा, मैं अभी तक कुछ नहीं पहुंचा हूं।

टेम्पलेट्स

टेम्प्लेट की अवधारणा सरल है। हालाँकि मानक में इस शब्द का मतलब यह नहीं है कि हम किस चीज़ के अभ्यस्त हैं।

आधुनिक वेब फ्रेमवर्क में, DOM के तार या टुकड़े होते हैं जिसमें हम उपयोगकर्ता को दिखाने से पहले डेटा को प्रतिस्थापित करते हैं।

वेब घटकों में, टेम्पलेट्स DOM के टुकड़े हैं। ब्राउज़र उनकी सामग्री को पार्स करता है, लेकिन तब तक निष्पादित नहीं करता है जब तक हम इसे दस्तावेज़ में पेस्ट नहीं करते हैं। यही है, ब्राउज़र चित्रों, ऑडियो और वीडियो को डाउनलोड नहीं करेगा, स्क्रिप्ट निष्पादित नहीं करेगा।

उदाहरण के लिए, दस्तावेज़ में मार्कअप का ऐसा टुकड़ा छवि को लोड करने का कारण नहीं होगा।

  <template id="tmpl-user"> <h2 class="name"> </h2> <img src="photo.jpg"> </template>

हालांकि ब्राउज़र <template> की सामग्री को पार्स करेगा। आप इसे js का उपयोग करके प्राप्त कर सकते हैं:

  var tmpl = document.querySelector('#tmpl-user'); //  <template> var content = tmpl.content; var imported; //    : content.querySelector('.name').innerText = ''; //        , //  document.importNode() // //    ``  , //       `photo.jpg` imported = document.importNode(content); //     : document.body.appendChild(imported);

टेम्पलेट कैसे काम करते हैं, इसका एक उदाहरण यहां पाया जा सकता है ।

लेख में सभी उदाहरणों को शामिल झंडों के साथ क्रोम कैनरी में देखा जाना चाहिए:

प्रायोगिक वेब प्लेटफ़ॉर्म सुविधाएँ
HTML आयात सक्षम करें
प्रयोगात्मक जावास्क्रिप्ट सक्षम करें

किस लिए?

वर्तमान में टेम्पलेट्स के साथ काम करने के तीन तरीके हैं:

पृष्ठ पर एक छिपे हुए तत्व के लिए एक टेम्पलेट जोड़ें। जब उसकी जरूरत होगी
कॉपी और स्थानापन्न डेटा:
```
  <div hidden data-template="my-template"> <p>Template Content</p> <img></img> </div> 
```
इस दृष्टिकोण के नुकसान यह हैं कि ब्राउज़र टेम्पलेट कोड को "निष्पादित" करने का प्रयास करेगा। यानी चित्र अपलोड करें, स्क्रिप्ट कोड निष्पादित करें, आदि।
टेम्पलेट की सामग्री को स्ट्रिंग के रूप में प्राप्त करें (AJAX या <script type="x-template"> से अनुरोध करें)।
```
  <sctipt type="x-template" data-template="my-template"> <p>Template Content</p> <img src="{{ image }}"></img> </script> 
```
नकारात्मक पक्ष यह है कि आपको स्ट्रिंग्स के साथ काम करना होगा। इससे XSS को खतरा है, बचने पर अतिरिक्त ध्यान देना होगा।
होगन.जैस जैसे संकलित टेम्पलेट भी तार के साथ काम करते हैं। इसलिए उनके पास दूसरे प्रकार के टेम्पलेट्स के समान दोष है।

<template> में ये दोष नहीं हैं। हम DOM के साथ काम करते हैं, स्ट्रिंग्स के साथ नहीं। जब कोड निष्पादित करने के लिए भी हमारे ऊपर है।

छाया डोम

Encapsulation। मार्कअप के साथ काम करने के दौरान मुझे सबसे ज्यादा याद आती है। शैडो डोम क्या है और कैसे काम करता है यह एक उदाहरण के साथ समझना आसान है।

जब हम html5 तत्व का उपयोग करते हैं, तो <audio> तत्व कुछ इस तरह दिखता है:

  <audio controls src="kings-speech.wav"></audio>

लेकिन पेज पर ऐसा दिखता है:

अ त तत्व

हम बहुत सारे नियंत्रण, प्रगति बार, ऑडियो लंबाई संकेतक देखते हैं। ये तत्व कहां से आते हैं और उन्हें कैसे प्राप्त करना है? इसका उत्तर है कि वे तत्व के शैडो ट्री में हैं। हम चाहकर भी उन्हें DevTools में देख सकते हैं।

Chrome के लिए DevTools में शैडो डोम की सामग्री को प्रदर्शित करने के लिए, DevTools सेटिंग्स में, सामान्य टैब, एलिमेंट्स सेक्शन, Show Shadow DOM की जाँच करें।

DevTools में शैडो डोम <audio> की सामग्री:

devtools शैडो डोम

उदाहरण लिंक

छाया डोम सिद्धांत

शैडो ट्री एक सबट्री होती है जो किसी डॉक्यूमेंट में एक एलिमेंट से जुड़ी होती है। इस मामले में तत्व को शैडो होस्ट कहा जाता है, इसके स्थान पर ब्राउज़र छाया पेड़ की सामग्री को प्रदर्शित करता है, तत्व की सामग्री को अनदेखा करता है।

यह वास्तव में ऊपर के उदाहरण में <audio> टैग के साथ होता है; इसके स्थान पर, ब्राउज़र छाया पेड़ की सामग्री को प्रस्तुत करता है।

शैडो डोम विशेषता यह है कि <style> का उपयोग करके इसमें परिभाषित शैलियाँ मूल दस्तावेज़ पर लागू नहीं होती हैं। हमारे पास छाया वृक्ष की सामग्री पर मूल दस्तावेज की शैलियों के प्रभाव को सीमित करने का भी अवसर है। उस पर और बाद में।

एक छायादार पेड़ लगाओ

शैडो डोम एपीआई उपयोगकर्ताओं को बनाने और करने की अनुमति देता है
छाया वृक्ष की सामग्री में हेरफेर करें।

एक उदाहरण है

  <div class="shadow-host">     . </div> <script> var shadowHost = document.querySelector('.shadow-host'); var shadowRoot = shadowHost.createShadowRoot(); shadowRoot.innerText = '   .' </script>

परिणाम:

उदाहरण लिंक

अनुमान, `<content>`

एक प्रक्षेपण एक छाया पेड़ में मेजबान सामग्री का उपयोग होता है । इसके लिए, मानक में <content> ।

यह महत्वपूर्ण है कि <content> होस्ट की सामग्री को प्रोजेक्ट करता है, और इसे होस्ट से छाया ट्री में स्थानांतरित नहीं करता है। मेजबान के वंशज अपने स्थान पर बने रहते हैं, दस्तावेज़ की शैलियाँ (और छाया वृक्ष नहीं) उन पर लागू होती हैं। <content> दुनिया के बीच एक तरह की खिड़की है।

एक उदाहरण है

  <template id="content-tag"> <p>   <strong>shadow tree</strong>. </p> <p>    <strong>shadow host</strong>: </p> <content></content> </template> <div class="shadow-host"> <h1 class="name"></h1> <img src="varlam.png"> <p class="description"> </p> </div> <script> var host = document.querySelector('.shadow-host'), template = document.querySelector('#content-tag'), shadow = host.createShadowRoot(); shadow.appendChild(template.content); </script>

परिणाम:

उदाहरण लिंक

शैडो डोम में शैलियाँ

शैलियों का इनकैप्सुलेशन शैडो डोम की मुख्य विशेषता है। एक छाया वृक्ष में परिभाषित शैलियाँ इस वृक्ष के अंदर ही शक्ति होती हैं।

एक कष्टप्रद विशेषता यह है कि आप छाया पेड़ में बाहरी सीएसएस फ़ाइलों का उपयोग नहीं कर सकते हैं। मुझे उम्मीद है कि भविष्य में यह तय हो जाएगा।

एक उदाहरण है

  <template id="color-green"> <style> div { background-color: green; } </style> <div></div> </template> <div class="shadow-host"></div> <script> var host = document.querySelector('.shadow-host'), template = document.querySelector('#color-green'), shadow = host.createShadowRoot(); shadow.appendChild(template.content); </script>

उदाहरण में हरे रंग की पृष्ठभूमि छाया वृक्ष के अंदर केवल `<div>` प्राप्त होगी।
ऐसी शैलियाँ हैं जो मुख्य दस्तावेज़ में प्रवाहित नहीं होती हैं।

परिणाम:

ग्रीन

उदाहरण लिंक

निहित शैली

डिफ़ॉल्ट रूप से, विरासत में मिली शैलियाँ जैसे color , font-size और अन्य छाया वृक्ष की सामग्री को प्रभावित करते हैं। हम इससे shadowRoot.resetStyleInheritance = true यदि हम shadowRoot.resetStyleInheritance = true सेट shadowRoot.resetStyleInheritance = true ।

एक उदाहरण है

  <template id="reset"> <p>    .</p> <content></content> </template> <div class="shadow-host"> <p>Host Content</p> </div> <script> var host = document.querySelector('.shadow-host'), template = document.querySelector('#reset'), shadow = host.createShadowRoot(); shadow.resetStyleInheritance = true; shadow.appendChild(template.content); </script>

परिणाम:

उदाहरण लिंक

कॉपीराइट शैलियों

दस्तावेज़ शैलियों को प्रभावित करने के लिए कि छाया वृक्ष कैसा दिखता है, applyAuthorStyles गुण का उपयोग करें।

एक उदाहरण है

  <template id="no-author-st"> <div class="border">div.border</div> </template> <style> /*    */ .border { border: 3px dashed red; } </style> <div class="shadow-host"></div> <script> var host = document.querySelector('.shadow-host'), template = document.querySelector('#no-author-st'), shadow = host.createShadowRoot(); shadow.applyAuthorStyles = false; //  - shadow.appendChild(template.content); </script>

applyAuthorStyles का मान बदलने पर, हमें एक अलग परिणाम मिलता है:

applyAuthorStyles = false

लेखक शैलियों के लिए नहीं

applyAuthorStyles = true

लेखक शैलियों के लिए हाँ

उदाहरण लिंक, applyAuthorStyles = false

उदाहरण लिंक, लागू करेंआर्टऑर्टल्स = सच

^ और ^ ^ चयनकर्ता

एनकैप्सुलेशन महान है, लेकिन अगर हम अभी भी छाया के पेड़ पर जाना चाहते हैं और दस्तावेज़ की शैलियों से इसकी प्रस्तुति को बदलना चाहते हैं, तो हमें एक हथौड़ा की आवश्यकता है। और एक स्लेजहैमर।

div ^ p चयनकर्ता div p के अपवाद के समान है कि यह एक छाया सीमा को पार करता है।

div ^^ p चयनकर्ता पिछले एक के समान है, लेकिन छाया सीमाओं की किसी भी राशि को प्रतिच्छेद करता है।

एक उदाहरण है

  <template id="hat"> <p class="shadow-p">   . </p> </template> <style> /*    */ .shadow-host ^ p.shadow-p { color: red; } </style> <div class="shadow-host"></div> <script> var host = document.querySelector('.shadow-host'), template = document.querySelector('#hat'), shadow = host.createShadowRoot(); shadow.appendChild(template.content); </script>

परिणाम:

उदाहरण लिंक

मुझे शैडो डोम की आवश्यकता क्यों है?

शैडो डोम आपको HTML तत्वों के आंतरिक प्रतिनिधित्व को बदलने की अनुमति देता है, बाहरी प्रतिनिधित्व को अपरिवर्तित छोड़ देता है।

संभव उपयोग iframe का एक विकल्प है। बाद वाला भी अलग-थलग है। एक बाहरी दस्तावेज़ के साथ बातचीत करने के लिए, आपको संदेश भेजने के लिए पागल तरीकों का आविष्कार करना होगा। सीएसएस का उपयोग करके एक बाहरी दृश्य को बदलना संभव नहीं है।

iframe विपरीत, शैडो डोम आपके दस्तावेज़ का हिस्सा है। और यद्यपि छाया वृक्ष कुछ अलग-थलग है, अगर वांछित है, तो हम शैलियों का उपयोग करके इसके प्रतिनिधित्व को बदल सकते हैं, या इसे एक स्क्रिप्ट के साथ उठा सकते हैं।

कस्टम तत्व

कस्टम तत्व अपने स्वयं के HTML तत्वों को बनाने के लिए एक उपकरण है। वेब कंपोनेंट्स के इस हिस्से का एपीआई परिपक्व दिखता है और निर्देशों से मिलता-जुलता है
कोणीय । शैडो डोम और टेम्प्लेट के संयोजन में, कस्टम तत्व <audio> , <video> या <input type="date"> जैसे पूर्ण-विजेट विजेट बनाना संभव बनाते हैं।

संघर्ष से बचने के लिए, मानक के अनुसार, कस्टम तत्वों को उनके नाम में एक हाइफ़न होना चाहिए। डिफ़ॉल्ट रूप से, वे HTMLElement वारिस करते हैं। इस प्रकार, जब ब्राउज़र <my-super-element> जैसे मार्कअप में आता है, तो वह इसे HTMLElement रूप में पार्स करता है। <mysuperelement> के मामले में, परिणाम HTMLUnknownElement होगा।

एक उदाहरण है

  <dog></dog> <x-dog></x-dog> <dl> <dt>dog type</dt> <dd id="dog-type"></dd> <dt>x-dog type</dt> <dd id="x-dog-type"></dd> </dl> <script> var dog = document.querySelector('dog'), dogType = document.querySelector('#dog-type'), xDog = document.querySelector('x-dog'), xDogType = document.querySelector('#x-dog-type'); dogType.innerText = Object.prototype.toString.apply(dog); xDogType.innerText = Object.prototype.toString.apply(xDog); </script>

परिणाम:

उदाहरण लिंक

कस्टम तत्व एपीआई

हम अपने तत्व के गुणों और विधियों को परिभाषित कर सकते हैं। जैसे कि <audio> तत्व का play() विधि।

तत्व के जीवन चक्र में 4 घटनाएं शामिल हैं, प्रत्येक के लिए हम एक कॉलबैक लटका सकते हैं:

बनाया - तत्व उदाहरण बनाया
संलग्न - तत्व DOM में डाला गया है
अलग - डोम से हटाए गए आइटम
विशेषता-तत्व - तत्व विशेषता को जोड़ा, हटाया या बदला गया

एक कस्टम तत्व बनाने के लिए एल्गोरिथ्म इस तरह दिखता है:

एक प्रोटोटाइप तत्व बनाएं।

एक प्रोटोटाइप को एक HTMLElement या उसके वंशज को प्राप्त करना होगा,
जैसे HTMLButtonElement :
```
  var myElementProto = Object.create(HTMLElement.prototype, { // API    lifecycle callbacks }); 
```
DOM.registerElement document.registerElement() का उपयोग करके DOM में एक तत्व पंजीकृत करें:
```
  var myElement = document.registerElement('my-element', { prototype: myElementProto }); 
```

एक उदाहरण है

  <x-cat></x-cat> <div> <strong>Cat's life:</strong> <pre id="cats-life"></pre> </div> <script> var life = document.querySelector('#cats-life'), xCatProto = Object.create(HTMLElement.prototype, { nickName: 'Cake', writable: true }); xCatProto.meow = function () { life.innerText += this.nickName + ': meow\n'; }; xCatProto.createdCallback = function () { life.innerText += 'created\n'; }; xCatProto.attachedCallback = function () { life.innerText += 'attached\n'; }; xCatProto.detachedCallback = function () { life.innerText += 'detached\n'; }; xCatProto.attributeChangedCallback = function (name, oldVal, newVal) { life.innerText += ( 'Attribute ' + name + ' changed from ' + oldVal + ' to ' + newVal + '\n'); }; document.registerElement('x-cat', { prototype: xCatProto }); document.querySelector('x-cat').setAttribute('friend', 'Fiona'); document.querySelector('x-cat').meow(); document.querySelector('x-cat').nickName = 'Caaaaake'; document.querySelector('x-cat').meow(); document.querySelector('x-cat').remove(); </script>

परिणाम:

उदाहरण लिंक

हमें कस्टम तत्वों की आवश्यकता क्यों है?

कस्टम तत्व सिमेंटिक मार्कअप की ओर एक कदम है। प्रोग्रामर के लिए अमूर्त बनाना महत्वपूर्ण है। शब्दार्थ रूप से तटस्थ <div> या <ul> निम्न-स्तरीय टाइपसेटिंग के लिए अच्छी तरह से अनुकूल <ul> , जबकि कस्टम तत्व उच्च स्तर पर मॉड्यूलर, पठनीय कोड लिखने की अनुमति देंगे।

शैडो डीओएम और कस्टम तत्व सुविधाजनक एपीआई और एनकैप्सुलेटेड आंतरिक प्रतिनिधित्व के साथ संदर्भ-स्वतंत्र विजेट बनाने के लिए संभव बनाते हैं।

HTML आयात

आयात एक साधारण एपीआई है जो लंबे समय से ब्राउज़रों में एक जगह है। वे दस्तावेज़ में अन्य फ़ाइलों से मार्कअप टुकड़े सम्मिलित करना संभव बनाते हैं।

एक उदाहरण है

  <link rel="import" href="widget.html"> <sctipt> var link = document.querySelector('link[rel="import"]'); //         // *import*. var importedContent = link.import; importedContent.querySelector('article'); </sctipt>

Object.observe ()

एक और अच्छा जोड़ और वेब घटक का हिस्सा (ऐसा लगता है) Object.observe() परिवर्तन पर नज़र रखने के लिए एपीआई है।

यदि आप प्रायोगिक वेब प्लेटफ़ॉर्म सुविधाएँ ध्वज सक्षम करते हैं तो यह विधि Chrome में उपलब्ध है।

एक उदाहरण है

  var o = {}; Object.observe(o, function (changes) { changes.forEach(function (change) { // change.object     console.log('property:', change.name, 'type:', change.type); }); }); ox = 1 // property: x type: add ox = 2 // property: x type: update delete ox // property: x type: delete

जब o ऑब्जेक्ट को बदल दिया जाता है, तो कॉलबैक कहा जाता है, इसके लिए एक सरणी दी जाती है
गुण जो बदल गए हैं।

टोडो विजेट

इस ज्ञान से लैस एक प्राचीन परंपरा के अनुसार, मैंने एक साधारण TODO विजेट बनाने का निर्णय लिया। यह वेब घटकों के कुछ हिस्सों का उपयोग करता है, जिनके बारे में मैंने एक लेख में बात की थी।

एक पृष्ठ पर एक विजेट जोड़ने से एक आयात और दस्तावेज़ के शरीर में एक टैग के लिए नीचे आता है।

एक उदाहरण है

  <html> <head> <link rel="import" href="todo.html"> </head> <body> <x-todo></x-todo> </body> </html> <script> // JS API : var xTodo = document.querySelector('x-todo'); xTodo.items(); //   xTodo.addItem(taskText); //  xTodo.removeItem(taskIndex); //  </script>

परिणाम:

डेमो लिंक

निष्कर्ष

HTML5 के विकास के साथ, ब्राउज़रों ने मूल रूप से नए मीडिया प्रारूपों का समर्थन किया है। <canvas> जैसे तत्व भी दिखाई दिए। अब हमारे पास क्लाइंट पर इंटरैक्टिव एप्लिकेशन बनाने के लिए बहुत बड़ी संभावनाएं हैं। इस मानक ने भी तत्व <article> , <header> , और अन्य को पेश किया। मार्कअप "अर्थ बनाने" के लिए शुरू हुआ, शब्दार्थ का अधिग्रहण किया।

मेरी राय में, वेब घटक अगला चरण है। डेवलपर्स इंटरेक्टिव विजेट बनाने में सक्षम होंगे। वे बनाए रखने, पुन: उपयोग, एकीकृत करने में आसान हैं।

पृष्ठ कोड "ब्लॉक", "पैराग्राफ" और "सूचियों" के एक सेट की तरह नहीं दिखेगा। हम "मेनू", "समाचार फ़ीड", "चैट" जैसे तत्वों का उपयोग कर सकते हैं।

बेशक, मानक नम है। उदाहरण के लिए, आयात के साथ-साथ टेम्पलेट भी काम नहीं करते हैं। उनके उपयोग ने समय-समय पर क्रोम को बर्बाद कर दिया है। लेकिन नवाचारों की मात्रा अद्भुत है। यहां तक कि इनमें से कुछ विशेषताएं वेब डेवलपर्स के लिए जीवन को आसान बना सकती हैं। और कुछ मौजूदा चौखटे के काम में काफी तेजी लाएंगे।

वेब कंपोनेंट्स के कुछ हिस्सों को अब पॉलीफिल्स के साथ इस्तेमाल किया जा सकता है। पॉलिमर प्रोजेक्ट एक पूर्ण अनुप्रयोग-स्तरीय ढांचा है जो वेब घटकों का उपयोग करता है।

ƒ

संदर्भ

वेब घटक इंट्रो , डब्लू 3 सी वर्किंग ड्राफ्ट
शैडो डोम , W3C एडिटर का ड्राफ्ट
इस लेख के उदाहरण
बग 811542 - वेब घटकों को लागू करें , Bugzilla @ मोज़िला

एरिक बिडेलमैन , वेब घटकों के बारे में लेख और वीडियो की एक श्रृंखला:

वेब घटक - वेब का भविष्य

टेम्पलेट्स

किस लिए?

छाया डोम

छाया डोम सिद्धांत

एक छायादार पेड़ लगाओ

अनुमान, <content>

शैडो डोम में शैलियाँ

निहित शैली

कॉपीराइट शैलियों

^ और ^ ^ चयनकर्ता

मुझे शैडो डोम की आवश्यकता क्यों है?

कस्टम तत्व

कस्टम तत्व एपीआई

हमें कस्टम तत्वों की आवश्यकता क्यों है?

HTML आयात

Object.observe ()

टोडो विजेट

निष्कर्ष

संदर्भ

More articles:

अनुमान, `<content>`