聆听 shadow DOM 中元素的“变化”

【问题标题】：Listen to the 'change' even of an element in the shadow DOM聆听 shadow DOM 中元素的“变化”
【发布时间】：2015-03-27 18:38:12
【问题描述】：

我正在尝试在影子 DOM 中选择一个元素。据我了解，有两个选项：/deep/ 或 ::shadow

我已经设置了一个 jsfiddle 来说明我的测试：
http://jsfiddle.net/chevdor/ph2qo5s8/4/

我正在使用 and 元素进行测试，并尝试选择其 div 作为示例。我知道我可以使用 -webkit 来访问这些，但这不是我需要的。

我没有成功获取 shadow-root 下的元素，既不使用 /deep/ 也不使用 ::shadow 我正在使用 Chrome。

有谁知道哪里出错了？

【问题讨论】：

标签： polymer web-component

【解决方案1】：

看来您正试图穿透原生 <input> 标记的影子 DOM。你不能穿透原生元素的影子 DOM。尝试改用polymer's paper-input element。这将暴露一个影子 DOM，您可以使用 /deep/ 或 ::shadow 选择器穿透。

<input id="native">
<paper-input id="paper"></paper-input>

<script>
    document.querySelector('#native /deep/ div'); //=> null
    document.querySelector('#paper /deep/ div'); //=> <div class="floated-label"></div>
</script>

在 Polymer 的 demo page for paper-input 上亲自尝试一下。

【讨论】：

你好 williamcodes，你是完全正确的。我没想到这一点，但实际上，没有办法刺穿原生元素，而它与聚合物元素一起工作得很好。感谢您的回答！
@Chevdor 谢谢，很高兴您对我的回答感到满意。您介意选择它作为正确的吗？