Prüfen, ob das Element # shadow-root enthält

Question

Ist es möglich zu sehen, ob ein Shadow-DOM-Element existiert? Ich bin nicht zu sehr damit beschäftigt, es zu manipulieren oder es sogar per-say wirklich anzusprechen. Ich verstehe die Argumentation der Kapselung. Aber ich würde gerne in der Lage sein, andere Elemente im regulären DOM zu stylen, abhängig davon, ob das Shadow-DOM-Element vorhanden ist oder nicht.

Art wie:

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

Oder wenn nicht für die Schatten-Wurzel, zumindest ein bestimmtes Element in der, wie die ID eines div. Wenn also dieses div existiert, dann ist klar, dass das Shadow-DOM-Element auf der Seite ist.

Ich weiß, es wäre nicht so einfach sein ... Von einigen Recherchen habe ich getan, es gibt Dinge, wie >>> und /deep/ aber ihre Unterstützung scheint niedrig/keine/veraltet zu sein. Kauf vielleicht gibt es einen anderen Weg, wie unelegant es auch sein mag?

Answer 1

Wenn Sie überprüfen wollen, ob ein spezifischen Element ist ein Schatten DOM-Element-Hosting, können Sie wie folgt vorgehen:

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

Sie können auch die Schatten DOM-Element, und dann arbeiten auf es wie ein normaler Knoten:

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

Hier ist ein Beispiel, das in der neuesten Version von Chrome funktioniert:

<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> 

Ich gab Ihnen die strenge Methode zur Überprüfung der Bedingung in all diesen Beispielen. Sie können natürlich auch Sie wie folgt auch:

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

Answer 2

Sie die shadowRoot eines Elements zugreifen können mit der Eigenschaft shadowRoot, so dass Sie alle Knoten durchqueren können und überprüfen, ob die Eigenschaft null ist oder nicht.

Sie können alle Knoten in einem Dokument mit document.getElementsByTagName('*') auswählen.

Also alles in allem, würden wir etwas davon haben:

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