🚏 🔃 👩🏿‍🏫 वेब घटक भाग 3: HTML टेम्पलेट और आयात 🔊 👩🏼‍💻 👩🏼‍💼

प्रविष्टि

सहकर्मियों का अभिवादन। यह लेख वेब घटकों के बारे में लेखों की श्रृंखला में तीसरा और अंतिम लेख है। पहले दो लेख इस पर उपलब्ध हैं:

वेब घटक। भाग 1: कस्टम तत्व
वेब घटक भाग 2: छाया डोम

यह आलेख <टेम्पलेट> तत्व के बारे में और HTML आयातों के बारे में भी बात करेगा।

HTML टेम्पलेट तत्व

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

किसी पृष्ठ को पार्स करते समय, किसी तत्व की सामग्री को केवल सामग्री सत्यापन के संदर्भ में संसाधित किया जाता है, लेकिन इसे प्रस्तुत किए बिना (विनिर्देश के अनुसार, यह तत्व प्रतिपादन करते समय किसी भी चीज़ का प्रतिनिधित्व नहीं करता है)। तत्व की सामग्री को लिपियों से दस्तावेज़ में क्लोन किया जा सकता है और चिपकाया जा सकता है, जिसका उपयोग स्वतंत्र रूप से मानकीकरण और वेब घटक बनाते समय दोनों के लिए किया जाता है।

सामग्री <टेम्पलेट>

<टेम्पलेट> की सामग्री, साथ ही साथ किसी भी नोड के लिए जिसमें ब्राउज़र संदर्भ नहीं है, HTML और XML सिंटैक्स की शुद्धता के लिए आवश्यकताओं को छोड़कर, किसी भी अनुपालन आवश्यकताओं को लागू नहीं करता है। इसका मतलब है कि टेम्पलेट की सामग्री में, उदाहरण के लिए, आप src और alt विशेषताओं के मान को निर्दिष्ट किए बिना img तत्व निर्दिष्ट कर सकते हैं, इस प्रकार:

<template> <div> <img src="{{src}}" alt="{{alt}}"> </div> </template>

हालाँकि, <टेम्पलेट> तत्व के बाहर, ऐसा सिंटैक्स मान्य नहीं है। इस स्थिति में, समापन टैग </ div> को छोड़ना HTML सिंटैक्स का उल्लंघन होगा और <टेम्पलेट> की सामग्री के लिए मान्य नहीं है।

Html कोड में <टेम्पलेट> टैग के अंदर निर्दिष्ट सभी तत्व इसके बच्चे नहीं हैं।

<टेम्पलेट> तत्व बनाते समय ब्राउज़र एक डॉक्यूमेंटफ्रेगमेंट बनाते हैं जिसका डॉक्यूमेंट तथाकथित है इस एल्गोरिथ्म द्वारा निर्धारित टेम्प्लेट सामग्री स्वामी के दस्तावेज़ को, दस्तावेज़ जिसमें <टेम्पलेट> निर्दिष्ट किया गया है और डॉक्यूमेंटफ्रेगमेंट द्वारा बनाई गई .content संपत्ति के मूल्य को इंगित करता है।

यही है, टेम्पलेट तत्व की .content संपत्ति में एक DocumentFragment होता है, और जो तत्व <टेम्पलेट> टैग के अंदर HTML कोड में निर्दिष्ट किए गए थे वे इस DocumentFragment के बच्चे हैं।

इस मामले में, किसी भी अन्य की तरह <टेम्पलेट> तत्व, बाल तत्वों ( appendChild () ) के साथ जोड़ा जा सकता है, लेकिन इसे टेम्पलेट सामग्री मॉडल का उल्लंघन माना जाएगा।

क्लोनिंग टेम्पलेट

टेम्प्लेट की सामग्री को क्लोन करते समय, यह याद रखना महत्वपूर्ण है कि पहला तर्क .cloneNode ([गहरा])
या .importNode (externalNode, deep) में दूसरे को स्थानांतरित किया जाना चाहिए (विनिर्देश के अनुसार, यदि तर्क पारित नहीं हुआ है, तो आगे निष्पादन नहीं होना चाहिए)।

वैसे, हां, इस तथ्य के बावजूद कि ज्यादातर उदाहरण .cloneNode (), .importNode () का उपयोग करते हैं, यह भी संभव है। एकमात्र अंतर तब होता है जब दस्तावेज़ अपडेट किया जाता है (for .cloneNode () - appendChild () कॉल करने के बाद; forimportNode () - क्लोनिंग के बाद।

मुझे कोड दिखाएं ©

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

मैं html मार्कअप में दो <टेम्पलेट> तत्व बनाकर और उनमें मार्कअप को ट्रांसफर करके शुरू करूंगा जो कि TabNavigationItem और TabContentItem कक्षाओं की इनरेंडर () विधि में था (मैंने कुछ शैलियों को भी बदल दिया, लेकिन यह कार्यक्षमता को प्रभावित नहीं करता है):

  <template id="tab-nav"> <style> :host{ padding: 10px; background-color: rgb(81,180,186); transition: background-color 1s; text-align: center; } :host-context(.active) { background-color: rgb(93, 209, 216); } a{ text-decoration: none; color: rgb(3,32,40); } </style> <a href="#${this._target}"><slot></slot></a> </template>

और:

  <template id="tab-content"> <style> :host { display: none; padding: 20px; width: 100%; background-color: rgb(255,212,201); } :host-context(.active){ display: block; } </style> <div><slot></slot></div> </template>

प्रत्येक वर्ग के निर्माता में, मैं टेम्पलेट संपत्ति को बचाऊंगा। TabNavigationItem के लिए, यह होगा:

  this.template = document.getElementById('tab-nav');

TabContentItem के लिए:

  this.template = document.getElementById('tab-content');

इन वर्गों में से प्रत्येक के रेंडर () विधि में, .innerHTML प्रविष्टि को हटाने के बाद, मैं निम्नलिखित कोड जोड़ दूंगा:

  const content = this.template.content.cloneNode(true); this.shadowRoot.appendChild(content);

परिणामी कोड यहां पाया जा सकता है।

इस उदाहरण में, दोनों टेम्प्लेट HTML में निर्दिष्ट किए गए हैं, जो बोझिल लगते हैं और गूंजते नहीं हैं। यह आसानी से हमें इस विषय पर ले जाता है:

HTML आयात करता है

आयात HTML दस्तावेज़ हैं जो किसी अन्य HTML दस्तावेज़ द्वारा बाहरी संसाधनों के रूप में जुड़े हुए हैं। दस्तावेजों के बीच संबंधों की प्रणाली मसौदा विनिर्देश में अच्छी तरह से वर्णित है और इस लेख का विषय नहीं है।

सामान्य योजना छवि में दिखाई दे रही है:

।

आयातों को लागू करने के लिए, HTML लिंक प्रकारों (रिले विशेषता के मान) में एक नया प्रकार जोड़ा गया था।

<Link> तत्व की rel विशेषता के मान में निर्दिष्ट आयात शब्द स्वयं आयातित संसाधन के लिए एक लिंक बनाता है (संसाधन का डिफ़ॉल्ट प्रकार पाठ / html है)।

<लिंक> तत्व में एक एसिंक्स विशेषता हो सकती है।

ड्राफ्ट विनिर्देशों द्वारा पेश किए गए एक्सटेंशन HTMLLinkElement API में पेश किए जाते हैं: केवल-पढ़ने के लिए आयात संपत्ति जोड़ी जाती है जिसमें आयातित दस्तावेज़ होता है।

एक संपत्ति दो मामलों में शून्य हो सकती है: जब <लिंक> आयात का प्रतिनिधित्व नहीं करता है या <लिंक> दस्तावेज़ में नहीं है।

विनिर्देश अलग से कहता है कि एक ही वस्तु को हमेशा लौटाया जाना चाहिए।

आयातों के संदर्भ में, एक तथाकथित मास्टर दस्तावेज़ है, जो दस्तावेज़ है जो किसी और के आयातित संसाधन के बिना एक ही समय में संसाधन आयात करता है।

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

व्यवहार में

टैब घटक के लिए, मैं एक टेम्पलेट फ़ोल्डर बनाता हूं। इसमें, मैं दो फाइलें बनाऊंगा जिसमें मैं घटक मार्कअप को स्थानांतरित करूंगा।

  <!--templates/tab-content.html--> <template id="tab-content"> <style> :host { display: none; padding: 20px; width: 100%; background-color: rgb(255,212,201); } :host-context(.active){ display: block; } </style> <div><slot></slot></div> </template> <!--templates/tab-nav.html--> <template id="tab-nav"> <style> :host{ padding: 10px; background-color: rgb(81,180,186); transition: background-color 1s; text-align: center; } :host-context(.active) { background-color: rgb(93, 209, 216); } a{ text-decoration: none; color: rgb(3,32,40); } </style> <a href="#${this._target}"><slot></slot></a> </template>

Index.html फ़ाइल के <head> में, मैं टेम्प्लेट आयात करता हूं:

  <link rel="import" href="templates/tab-nav.html" id="tab-nav"> <link rel="import" href="templates/tab-content.html" id="tab-content">

मैं <लिंक> तत्वों में आईडी विशेषताओं को जोड़ता हूं, क्योंकि मुझे उन्हें js से एक्सेस करने की आवश्यकता होगी।
अब, टेम्पलेट दस्तावेज़ प्राप्त करने के लिए, TabNavigationItem और TabContentItem वर्गों के कंस्ट्रक्टर्स में, मुझे बस इसी <लिंक> तत्व को खोजने और इसकी आयात संपत्ति को चालू करने की आवश्यकता है, जिसके बाद मैं पहले से ही आयातित दस्तावेज़ में टेम्पलेट के लिए खोज करूंगा:

  class TabNavigationItem extends HTMLElement { constructor() { super(); this._target = null; this.attachShadow({mode: 'open'}); const templateImport = document.getElementById('tab-nav').import; this.template = templateImport.getElementById('tab-nav'); } //... } class TabContentItem extends HTMLElement { constructor() { super(); this._target = null; this.attachShadow({mode: 'open'}); const templateImport = document.getElementById('tab-content').import; this.template = templateImport.getElementById('tab-content'); } //... }

अंतिम संस्करण यहां लिया जा सकता है ।

समर्थन के बारे में

HTML टेम्पलेट्स के लिए समर्थन: एज सी 16, फ़ायरफ़ॉक्स सी 59, क्रोम सी 49, सफारी सी 11।
इम्पोर्ट सपोर्ट सैडर के साथ: क्रोम सी 49।
इसलिए, इस आलेख के उदाहरण केवल नवीनतम क्रोम में देखे जा सकते हैं।

पॉलीफ़ाइल्स हैं:

Webcomponents
पॉलिमर-परियोजना

टेम्प्लेट और आयात के बारे में और पढ़ें:

HTML विनिर्देशन
HTML5 विनिर्देशन
HTML आयात ड्राफ्ट विनिर्देशों

यह सब देखने के लिए धन्यवाद,
तान्या

वेब घटक भाग 3: HTML टेम्पलेट और आयात