Polymer的陰影DOM與陰影DOM有什麼區別？

Question

我遇到了使用陰影DOM爲其中一個網絡組件（紙張分檔器）的問題，它需要使用陰影DOM來代替。我不確定區別是什麼，爲什麼是這樣。

Answer 1

Here's很好的解釋了爲什麼。

鉈; DR：

影子DOM：

影子DOM的工作原理是從傳統的 樹行走功能和存取隱藏範圍的DOM樹（的childNodes，孩子，則firstChild 等上）。這些訪問器只返回範圍內的元素。

這意味着它隱藏了一層複雜程度。我在網上找到的其中一個例子是關於<video></video>標籤。它解釋了它內部的視頻控件，但是這些控件被抽象出來並且看不到它們。這就是Shadow DOM所做的，但是對於所有的Web組件。

影子DOM聽起來不錯，但也有侷限性

• 這是一個很大的代碼。
• 間接調用所有DOM API的速度很慢。
• 像NodeList的結構可以簡單地不被仿真。
• 有些訪問器不能被覆蓋（例如， window.document，window.document.body）。
• 該polyfill返回的對象實際上不是Nodes節點，而是代理節點 ，這可能非常令人困惑。

這就是黑幕DOM進來

黑幕DOM：

黑幕DOM是影子DOM提供 樹作用域超快墊片，但也有缺點。最重要的是，必須使用隱藏的DOM API來處理有限範圍的樹。

通過使用Shady DOM，您現在不具有組件的抽象視圖。你可以看到一切。然而，隨着黑幕DOM，你可以檢查樹會是什麼樣子，如果是被用來代替運行這個陰影DOM：

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

所以，把所有這些信息考慮如何在不同的DOM工作，好像造紙步進式Web組件需要訪問整個樹才能正常工作。由於Shadow DOM抽象了內部元素，因此必須使用Shady DOM或重構代碼，以便內部元素不需要從抽象外部訪問。