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

Question

我在为其中一个网络组件（paper-stepper）使用阴影 DOM 时遇到问题，它需要使用阴影 DOM 来代替。我不确定有什么区别以及为什么会这样。

Answer 1

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

Tl;DR:

阴影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 组件。

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

代码很多。
间接所有 DOM API.
像 NodeList 这样的结构根本无法模拟。
有些访问器不能被覆盖（例如， window.document,window.document.body).
polyfill returns 实际上不是节点的对象，而是节点代理，这可能会非常混乱。

这就是阴暗 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，您现在没有组件的抽象视图。你可以看到一切。然而，对于 Shady DOM，您可以检查如果 Shadow DOM 被运行代替时树的外观：

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

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

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

What's the difference between Polymer's shady DOM vs shadow DOM?

shadow-dom

polymer

polymer-1.0

shady-dom