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

【问题标题】：What's the difference between Polymer's shady DOM vs shadow DOM?Polymer 的 shady DOM 与 shadow DOM 有什么区别？
【发布时间】：2016-10-08 01:13:16
【问题描述】：

我在将 shadow DOM 用于其中一个 Web 组件（paper-stepper）时遇到问题，它需要使用 shady DOM。我不确定有什么区别以及为什么会这样。

【问题讨论】：

标签： polymer polymer-1.0 shadow-dom shady-dom

【解决方案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 返回的对象实际上不是节点，而是节点代理，这可能非常令人困惑。

这就是 shady DOM 的用武之地。

Shady DOM：

Shady DOM 是一种用于 shadow DOM 的超快速填充程序，它提供树范围，但有缺点。最重要的是，必须使用用于处理作用域树的 shady DOM API。

通过使用 Shady DOM，您现在没有组件的抽象视图。你可以看到一切。但是，使用 Shady DOM，您可以通过运行以下命令来检查如果使用 Shadow DOM 时树的外观：

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

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

【讨论】：

这取决于你在附加影子树时是使用打开模式还是关闭模式。