Polymer的shady DOM与shadow DOM有什么区别？

Question

我在使用shadow DOM进行其中一个Web组件（纸张步进器）时遇到问题，而且需要使用阴影DOM。我不确定区别是什么，为什么会这样。

Answer 1

Here's对原因的一个很好的解释。

Tl; DR：

暗影DOM：

  

Shadow DOM通过隐藏传统的范围DOM树来工作   树行走函数和访问器（childNodes，children，firstChild   等等）。这些访问器仅返回范围中的元素。

这意味着它隐藏了一层复杂性。我在网上找到的一个例子是<video></video>标签。它解释了视频控件中是如何进行视频控制的，但是它们被抽象掉了，你无法看到它们。这就是Shadow DOM的功能，但适用于所有Web组件。

Shadow DOM听起来不错，但也有局限性

• 这是很多代码。
• 间接所有DOM API的速度很慢。
• 像NodeList这样的结构根本无法模拟。
• 某些访问者无法覆盖（例如， window.document，window.document.body）。
• polyfill返回的对象实际上不是节点，而是Node 代理，这可能非常令人困惑。

这是shady DOM的用武之地。

Shady DOM：

  

Shady DOM是一个提供的影子DOM的超快速垫片   树木范围，但有缺点。最重要的是，必须使用   shady DOM API，用于处理范围内的树。

通过使用Shady DOM，您现在没有组件的抽象视图。你可以看到一切。但是使用Shady DOM，你可以通过运行它来检查如果使用Shadow DOM而树的样子：

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

因此，考虑到所有这些信息，不同的DOM如何工作，似乎纸张步进器Web组件需要访问整个树才能正常工作。由于Shadow DOM抽象了内部元素，因此您必须使用Shady DOM或重构代码，以便不需要从抽象外部访问内部元素。