Verificare se l'elemento contiene # shadow-root

Question

E 'possibile vedere se esiste un elemento DOM shadow? Non sono troppo interessato a manipolarlo, o addirittura a prenderlo di mira per dire. Capisco il ragionamento dell'incapsulamento. Ma mi piacerebbe essere in grado di disegnare altri elementi nel DOM normale, in base alla presenza o meno dell'elemento Shadow DOM.

Un po 'come:

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

O se non per l'ombra-root, almeno un elemento specifico all'interno, come l'ID di un div. Quindi se quel div esiste, allora chiaramente l'elemento Shadow DOM è sulla pagina.

So che non sarebbe così semplice ... Da alcune ricerche che ho fatto, ci sono cose come >>> e /deep/ ma il loro supporto sembra essere basso/nessuno/deprecato. Compra forse c'è un altro modo, per quanto inelegante possa essere?

Answer 1

Se si desidera controllare se un determinato elemento ospita un elemento Ombra DOM, è possibile effettuare le seguenti operazioni:

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

È anche possibile ottenere l'elemento Ombra DOM, e poi operare su come un nodo normale:

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

Ecco un esempio che funziona nella versione più recente di Chrome:

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

Ti ho dato il metodo rigoroso di controllare la condizione in tutti questi esempi. Ovviamente si può effettuare le seguenti operazioni così:

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

Answer 2

È possibile accedere alla shadowRoot di un elemento con la proprietà shadowRoot, così da poter attraversare tutti i nodi e verificare se la proprietà è null o non.

È possibile selezionare tutti i nodi in un documento con document.getElementsByTagName('*').

Quindi, tutto sommato, avremmo qualcosa di simile:

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