Jaka jest różnica między podejrzanym DOM-a w stosunku do cieniowania Polymer?

Question

Mam problemy z korzystaniem z shadow DOM dla jednego z komponentów internetowych (papierowy program krokowy) i wymaga użycia cieniowanego DOM. Nie jestem pewien, jakie są różnice i dlaczego tak się dzieje.

Answer 1

Here's dobre wyjaśnienie, dlaczego.

Tl; DR:

Cień DOM:

Cień DOM działa poprzez ukrywanie scoped drzewa DOM od tradycyjnych funkcji drzewo spacerowych i dostępowych (childNodes, dzieci, firstChild i tak na). Te akcesory zwracają tylko te elementy w swoim zasięgu.

Co to oznacza, że ​​ukrywa przed Tobą złożoność. Jednym z przykładów, które znalazłem w Internecie, było oznaczenie <video></video>. Wyjaśnia, jak w nim znajdują się kontrolki wideo, ale te są usuwane i nie można ich zobaczyć. Tak działa DOM Shadow, ale dla wszystkich komponentów sieciowych.

Cień DOM brzmi ładnie, ale istnieją ograniczenia

• Jest dużo kodu.
• Powoli pośredniczy wszystkie DOM API.
• Struktury takie jak NodeList nie mogą być po prostu emulowane.
• Istnieje kilka akcesorów, których nie można zastąpić (na przykład window.document, window.document.body).
• Polyfill zwraca obiekty, które nie są rzeczywiście węzłami, ale serwery proxy, które mogą być bardzo mylące.

tym miejscu zacienionym DOM przychodzi

Shady DOM.

Shady DOM jest superszybki podkładka dla cienia DOM, który zapewnia drzewo-scopingu, ale ma wady . Co najważniejsze, do pracy z drzewami o ustalonych zakresach należy użyć podejrzanych interfejsów API DOM-a.

Używając Shady DOM, nie masz teraz abstrakcyjnego widoku komponentów. Możesz zobaczyć wszystko. Jednak z Shady DOM, można zbadać, jak drzewo będzie wyglądać jeśli Cień DOM był używany zamiast uruchamiając w ten sposób:

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

Więc, biorąc wszystkie te informacje pod uwagę, w jaki sposób różne prace DOMS, wydaje się, komponent web-stepper-papier wymaga dostępu do całego drzewa, aby działał poprawnie. Skoro DOM Cienia wyabstrahowuje wewnętrzne elementy, musisz użyć Shady DOM lub zreorganizować kod w taki sposób, że nie trzeba uzyskiwać dostępu do wewnętrznych elementów spoza abstrakcji.