जांचें कि तत्व में # छाया-रूट

Question

है क्या यह देखना संभव है कि कोई छाया DOM तत्व मौजूद है या नहीं? मैं इसे छेड़छाड़ करने के लिए बहुत चिंतित नहीं हूं, या यहां तक ​​कि वास्तव में इसे प्रति-लक्ष्य भी लक्षित करता हूं। मैं encapsulation के तर्क को समझता हूँ। लेकिन मैं छाया डीओएम तत्व मौजूद है या नहीं, इस पर आधारित नियमित डीओएम में अन्य तत्वों को स्टाइल करने में सक्षम होना चाहता हूं।

तरह की क्रमबद्ध करें:

if ($('#element-id #shadow-root').length) { 
    // true 
} 

या अगर नहीं छाया-जड़, कम से कम के भीतर एक विशिष्ट तत्व, एक div की आईडी की तरह के लिए। तो यदि वह div मौजूद है, तो स्पष्ट रूप से छाया DOM तत्व पृष्ठ पर है।

मुझे पता है कि यह इतना आसान नहीं होगा ... मैंने कुछ शोध किए हैं, >>> और /deep/ जैसी चीजें हैं लेकिन उनका समर्थन कम/कोई/बहिष्कृत नहीं लगता है। शायद एक और तरीका खरीदें, हालांकि यह सुरुचिपूर्ण हो सकता है?

Answer 1

आप एक विशिष्ट तत्व एक छाया DOM एलीमेंट होस्ट कर रहा है या नहीं, जांच करना चाहते हैं, तो आप क्या कर सकते हैं निम्नलिखित:

var el = document.querySelector('#some-element'); 
if (el.shadowRoot === root) { 
    // Then it is hosting a Shadow DOM element 
} 

तुम भी छाया डोम तत्व प्राप्त कर सकते हैं, और फिर पर कार्य करते हैं यह एक सामान्य नोड की तरह:

<p>A Normal Paragraph</p> 
<div>A Normal Div</div> 

<script> 
    var host = document.querySelector('p'); 
    var root = host.createShadowRoot(); 
    root.textContent = 'A Shadow DOM Paragraph'; 

    // Let's go ahead and query it again so we can see this work in an actual scenario 
    var p = document.querySelector('p'); 
    var div = document.querySelector('div'); 

    console.log('Paragraph has Shadow DOM:', (p.shadowRoot === root)); // true 
    console.log('Div has Shadow DOM:', (div.shadowRoot === root)); // false 
</script> 

0:

var shadowEl = el.shadowRoot; 
// And for example: 
console.log(shadowEl.innerHTML); 

यहाँ एक उदाहरण है कि Chrome का नवीनतम संस्करण में काम करता है

मैंने आपको इन सभी उदाहरणों में स्थिति की जांच करने की सख्त विधि दी है। आप निश्चित रूप से और साथ ही निम्न कर सकते हैं:

if (el.shadowRoot) {} //to loosely check 
if (!!el.shadowRoot) {} //to force boolean 

Answer 2

आप संपत्ति shadowRoot वाले एक तत्व की shadowRoot उपयोग कर सकते हैं, ताकि आप सभी नोड्स पार और देखें कि क्या संपत्ति रिक्त है या नहीं कर सका।

आप document.getElementsByTagName('*') वाले दस्तावेज़ में सभी नोड्स का चयन कर सकते हैं।

var allNodes = document.getElementsByTagName('*'); 
for (var i = 0; i < allNodes.length; i++) { 
    if(allNodes[i].shadowRoot) { 
    // Do some CSS styling 
    } 
}