听 'change' even of an element in the shadow DOM

Question

我正在尝试 select 阴影中的元素 DOM。据我了解，有 2 个选项：/deep/ 或 ::shadow

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

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

我没有成功获取影子根下的元素，既没有使用 /deep/ 也没有使用 ::shadow 我正在使用 Chrome.

有谁知道哪里出错了？

Answer 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.

上亲自尝试一下

听 'change' even of an element in the shadow DOM

Listen to the 'change' even of an element in the shadow DOM

web-component

polymer