2

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?

Chevdor
  • 664
  • 4
  • 12

1 Answers1

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.

williamcodes
  • 6,317
  • 8
  • 32
  • 55
  • Hello williamcodes, you are totally right. I did not expect that but indeed, no way to pierce the native elements whereas it works simply fine with polymer elements. Thanks for your answer! – Chevdor Mar 30 '15 at 18:59
  • @Chevdor thanks, I'm glad you're happy with my answer. Would you mind selecting it as the correct one? – williamcodes Mar 30 '15 at 22:10