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.

@H_301_15@

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

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

>这是很多代码.
>间接所有DOM API都很慢.
>像NodeList这样的结构根本无法模拟.
>某些访问者无法覆盖(例如,
window.document,window.document.body).
> polyfill返回实际不是节点的对象,但返回Node
代理,这可能非常令人困惑.

这就是shady DOM的用武之地.

Shady 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.

@H_301_15@

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

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

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