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

Question

我在为其中一个 Web 组件(纸步进器)使用 shadow DOM 时遇到问题，它需要使用 shady DOM 来代替。我不确定有什么区别以及为什么会这样。

Answer 1

Here's一个很好的解释为什么。

Tl;博士:

影子DOM:

Shadow DOM works by hiding the scoped DOM trees from the traditional tree walking functions and accessors (childNodes, children, firstChild and so on). These accessors return only the elements in your scope.

这意味着它对您隐藏了一层复杂性。我在网上找到的例子之一是关于 <video></video>标签。它解释了如何在其中包含视频控件，但这些控件已被抽象化，您无法看到它们。这就是 Shadow DOM 所做的，但适用于所有 Web 组件。

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

这是很多代码。

间接访问所有 DOM API 很慢。

NodeList 之类的结构根本无法模拟。

有些访问器不能被覆盖(例如，
窗口.文档，窗口.文档.正文)。

polyfill 返回的对象实际上不是 Nodes，而是 Node
代理，这可能非常令人困惑。

这就是阴暗的 DOM 的用武之地。

阴暗的 DOM:

Shady DOM is a super-fast shim for shadow DOM that provides tree-scoping, but has drawbacks. Most importantly, one must use the shady DOM APIs to work with scoped trees.

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

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

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