javascript - 如何在 safari 中找到 Shadow DOM 中的元素？ ( polymer )

Question

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

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

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

Answer 1

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

现在 Polymer 的人也考虑到了 Shadow DOM 的好处(没有设计流失)，所以他们想出了 shady DOM。这有双方:

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