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

问题

I am trying to select an element in the shadow DOM. As I understand, there are 2 options: /deep/ or ::shadow

I have setup a jsfiddle to illustrate my tests:
http://jsfiddle.net/chevdor/ph2qo5s8/4/

I am testing with and element and I try selecting on of its div as example. I know I could use -webkit to access those but this is not what I need.

I don´t succeed on getting the elements under the shadow-root, neither using /deep/ not using ::shadow I am using Chrome.

Does anyone know where the mistake could be?

回答1:

It appears you're trying to pierce the shadow DOM of a native <input> tag. You cannot pierce the shadow DOM of native elements. Try using polymer's paper-input element instead. That will expose a shadow DOM you can pierce with the /deep/ or ::shadow selector.

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

Try it out yourself on Polymer's demo page for paper-input.

来源：https://stackoverflow.com/questions/29307907/listen-to-the-change-even-of-an-element-in-the-shadow-dom