मैं कस्टम HTML टैग <component> या <slot> सामग्री का उपयोग कर सकते हैं

Question

चलो कहते हैं कि मैं इस तरह के रूप में एक कस्टम HTML तत्व बनाना चाहते हैं: तो फिर मैं

<div class="wrapper"> 
    etc.. 
    <content></content> 
</div> 

:

<video-container> 
    <video></video> 
</video-container> 

तो मैं इस तरह एक टेम्पलेट बनाने इसे एचटीएमएल एलिमेंट प्रोटोटाइप createdCallback के माध्यम से पृष्ठ पर संलग्न करें।

कि कॉलबैक मैं video तत्व को श्रोताओं संलग्न करने के लिए तो मैं play, pause आदि पर सामान कर सकते हैं सक्षम होना चाहते हैं अंदर .. यह अगर वहाँ वैसे भी है वीडियो टैग में पारित उपयोग करने के लिए मेरे लिए स्पष्ट नहीं है। मैं यह कर सकते हैं content टैग तक पहुंच प्राप्त करें लेकिन यह कोई भी बच्चा नोड्स नहीं दिखाता है। क्या यह संभव है?

यदि मैं सिर्फ पूरे दस्तावेज़ को पकड़ता हूं और वीडियो तत्व प्राप्त करता हूं तो यह वीडियो तत्व तक पहुंच सकता है लेकिन यह बदसूरत है क्योंकि मैं वर्तमान कस्टम तत्व के दायरे में केवल वीडियो टैग प्राप्त करने में सक्षम होना चाहता हूं।

Answer 1

प्रत्यक्ष रास्ता

आप कस्टम तत्व पर ही querySelector का उपयोग करके इसे उपयोग करना चाहिए:

VideoContainerPrototype.createdCallback = function() 
{ 
    var video1 = this.querySelector('video') 
} 

आप छाया डोम द्वारा पारित करने के लिए की जरूरत नहीं है।

---

छाया रास्ता

लेकिन आप छाया जड़ से इसे पाने के लिए चाहते हैं, तो आप अपने <slot> तत्व (पूर्व <content> पर getDistributedNodes()) पर assignedNodes() विधि का उपयोग कर सकते हैं:

var video2 = this.shadowRoot.querySelector('slot').assignedNodes()[1] 

यह नोड्स के एक ऐरे को डाला गया था जो डाला गया था। क्योंकि आपके उदाहरण में इंडेक्स [0] पर एक टेक्स्ट नोड है, आपको [1] पर नोड प्राप्त करना होगा।

नोट: यदि आप इंडेक्स [0] पर अपना <video> तत्व प्राप्त करना चाहते हैं तो आप नामित स्लॉट का भी उपयोग कर सकते हैं।