Qual è la differenza tra DOM ombreggiato di Polymer vs DOM ombra?

Question

Sto riscontrando problemi con shadow DOM per uno dei componenti web (stepper carta) e richiede invece l'uso del DOM ombreggiato. Non sono sicuro di quali siano le differenze e perché sia ​​così.

Answer 1

Here's una buona spiegazione del perché.

Tl; DR:

Ombra DOM:

Ombra DOM funziona nascondendo gli alberi DOM con ambito dai tradizionali funzioni albero di passeggio e di accesso (childNodes, i bambini, firstChild e così sopra). Questi accessors restituiscono solo gli elementi nel tuo scope.

Ciò significa che nasconde un livello di complessità da parte tua. Uno degli esempi che ho trovato online riguardava il tag <video></video>. Spiega come al suo interno ci sono i controlli video, ma quelli sono astratti e non puoi vederli. Questo è ciò che fa il DOM Shadow, ma per tutti i componenti web.

Ombra DOM suona bello, ma ci sono limitazioni

• E 'un sacco di codice.
• È lento indirizzare tutte le API DOM.
• Strutture come NodeList semplicemente non possono essere emulate.
• Ci sono determinati accessori che non possono essere sovrascritti (ad esempio, window.document, window.document.body).
• Il polyfill restituisce oggetti che non sono in realtà nodi, ma nodi proxy , che possono essere molto confusi.

Qui DOM ombreggiato entra in

Shady DOM.

Shady DOM è uno shim ultrarapido per DOM ombra che fornisce albero scoping, ma presenta inconvenienti . Ancora più importante, è necessario utilizzare le API DOM ombreggiate per lavorare con gli alberi con ambito.

Utilizzando il DOM ombreggiato, ora non si dispone di una vista astratta dei componenti. Puoi vedere tutto. Tuttavia, con Shady DOM, è possibile esaminare come l'albero potrebbe apparire come se Ombra DOM è stato utilizzato invece eseguendo questo:

var arrayOfNodes = Polymer.dom(YOUR_SELECTOR_GOES_HERE).children; 

Così, prendendo tutte queste informazioni in considerazione su come il diverso lavoro DOM, sembra il componente web stepper carta richiede l'accesso all'intero albero per funzionare correttamente. Dal momento che il DOM dell'ombrello astrae gli elementi interni, devi usare DOM ombreggiato o rifattorizzare il codice in modo tale che gli elementi interni non debbano essere accessibili dall'esterno dell'astrazione.