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

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

解决方法

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组件.

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.

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

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

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

原文地址：https://www.jb51.cc/html/227486.html