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

Question

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

Answer 1

这是对原因的一个很好的解释.

TL; DR:

影子DOM:

Shadow DOM的工作原理是隐藏传统树行走函数和访问器(childNodes,children,firstChild等)中的作用域DOM树.这些访问器仅返回范围中的元素.

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

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

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

这就是shady DOM的用武之地.

Shady DOM:

Shady DOM是一个超快速的垫片,用于提供树形作用的shadow DOM,但是有缺点.最重要的是,必须使用阴影DOM API来处理范围内的树.

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

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

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