नेस्टेड तत्व (वेब घटक) को अपना टेम्पलेट नहीं मिल सकता है

मैंने दो कस्टम तत्वों (v1) के साथ वेब घटक का उपयोग करके एक साधारण उदाहरण बनाया है जहां एक दूसरे में घोंसला है। index.html:नेस्टेड तत्व (वेब घटक) को अपना टेम्पलेट नहीं मिल सकता है

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Example</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="import" href="app-container.html"> 
</head> 
<body> 
    <app-container></app-container> 
</body> 
</html>

एप्लिकेशन-container.html:

<link rel="import" href="toolbar.html"> 
<template id="app-container"> 
    <app-toolbar></app-toolbar> 
</template> 
<script> 
    customElements.define('app-container', class extends HTMLElement { 
    constructor() { 
     super(); 
     let shadowRoot = this.attachShadow({ mode: 'open' }); 
     const content = document.currentScript.ownerDocument.querySelector('#app-container').content; 
     shadowRoot.appendChild(content.cloneNode(true)); 
    } 
    }); 
</script>

toolbar.html:

लेकिन toolbar.html document.currentScript में अनुप्रयोग में रूप में ही है -container.html और इसलिए querySelector('#app-toolbar') आईडी app-toolbar के साथ टेम्पलेट नहीं मिल रहा है। इस समस्या को हल कैसे करें?

उदाहरण क्रोम 55 (पॉलीफिल के बिना) पर परीक्षण किया गया।

स्रोत

2016-12-31 james bay

document.currentScript में वर्तमान में पार्स और निष्पादित स्क्रिप्ट का संदर्भ है। इसलिए यह आपके उद्देश्य के लिए अब मान्य नहीं है जब constructor() फ़ंक्शन को (किसी अन्य स्क्रिप्ट से) कहा जाता है।

इसके बजाय आप स्क्रिप्ट की शुरुआत में एक चर में अपने मूल्य को बचाने shoud, और निर्माता में इस चर का उपयोग करें:

<script> 
    var currentScript = document.currentScript 
    customElements.define(...) 
    ... 
</script>

आपके पास अनेक स्क्रिप्ट हैं, तो आप अलग नामों का उपयोग करना।

वैकल्पिक रूप से, आप एक बंद में अल्पकालिक मूल्य संपुटित कर सकते हैं:

(function(owner) { 
    customElements.define('app-container', class extends HTMLElement { 
     constructor() { 
      super(); 
      let shadowRoot = this.attachShadow({ mode: 'open' }); 
      const content = owner.querySelector('#app-container').content; 
      shadowRoot.appendChild(content.cloneNode(true)); 
     } 
    }); 
})(document.currentScript.ownerDocument);

यहाँ मूल्य document.currentScript.ownerDocumentowner तर्क है जो अभी भी सही ढंग से परिभाषित किया गया है जब constructor() कहा जाता है को सौंपा गया है।

owner स्थानीय रूप से परिभाषित किया गया है ताकि आप अन्य दस्तावेज़ में उसी नाम का उपयोग कर सकें।

स्रोत

2016-12-31 14:53:38 Supersharp

सुपरशेरप, बहुत धन्यवाद! नया साल मुबारक हो! –

धन्यवाद, आप भी! – Supersharp

नेस्टेड तत्व (वेब ​​घटक) को अपना टेम्पलेट नहीं मिल सकता है

उत्तर

संबंधित मुद्दे

नेस्टेड तत्व (वेब घटक) को अपना टेम्पलेट नहीं मिल सकता है