如何在 safari 的 shadow DOM 中找到元素？（聚合物）答案

【问题标题】：How can I find element in shadow DOM in safari? (Polymer)如何在 safari 的 shadow DOM 中找到元素？（聚合物）
【发布时间】：2016-01-13 22:20:50
【问题描述】：

我在 Polymer 上使用纸张输入，在 chrome 中我可以在 shadow DOM 中找到元素

var input = this.$.input.querySelector(':host /deep/ input')

但这在 Safari 中不起作用。我认为“/deep/”有问题。如何在 Safari 中找到元素？

【问题讨论】：

【解决方案1】：

除了 Chrome、Opera 和 Andriod (http://caniuse.com/#feat=shadowdom) 之外的任何浏览器都不支持 Shadow DOM 和所有连接的选择器。这就是为什么在 Polymer 1 中我们有 shady DOM。

现在 Polymer 的人也想到了 shadow DOM 的好处（没有设计流血），所以他们想出了 shady DOM。这必须是双方：

如果您将 CSS（尤其是 CSS 选择器）放入模板中，它会被重写。这就是为什么 :host、/deep/ 或 ::shadow 这样的东西会起作用的原因。
如果您像您一样在 JS 中使用选择器，则不必为这些特殊的选择器而烦恼。只需看看 DOM 就可以了。因此，例如 document.querySelectorAll('paper-input') 获取所有 paper-input 元素，无论它们位于 DOM 中的哪个位置。

【讨论】：