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

Question

I'm having issues using shadow DOM for one of the web-components (paper-stepper) and it requires the use of the shady DOM instead. I'm not sure what the differences are and why that is the case.

Answer 1

这是一个很好的解释为什么。

铊；博士：

影子 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 的用武之地。

阴暗的 DOM：

Shady DOM 是影子 DOM 的超快速填充程序，它提供树范围，但有缺点。最重要的是，必须使用 shady DOM API 来处理作用域树。

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

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

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