I have a web app which is developed using Polymer and want to implement end-to-end testing using JavaScript. That's why I am trying to programmatically set some value, but I'm unable to access the element's local DOM by either:

document.getElementById('nativeInput'); 
document.querySelector('#nativeInput');

Someone told me that it is not possible to access shadow-root elements directly and set a value on them. So my basic question is: How can I access an element's shadow DOM and set some value to its children?. Please let me know whether that is possible and if so, please share some solution.

See the screenshot to get a clearer understanding of what I am trying to acplish, on the HTML element with my JavaScript selector, on #shadow-root (open).

I have a web app which is developed using Polymer and want to implement end-to-end testing using JavaScript. That's why I am trying to programmatically set some value, but I'm unable to access the element's local DOM by either:

document.getElementById('nativeInput'); 
document.querySelector('#nativeInput');

Someone told me that it is not possible to access shadow-root elements directly and set a value on them. So my basic question is: How can I access an element's shadow DOM and set some value to its children?. Please let me know whether that is possible and if so, please share some solution.

See the screenshot to get a clearer understanding of what I am trying to acplish, on the HTML element with my JavaScript selector, on #shadow-root (open).

• javascript
• dom
• polymer
• shadow-dom

Share Improve this question Follow edited Nov 28, 2017 at 11:12 craPkit 65311 gold badge88 silver badges2020 bronze badges asked Nov 27, 2017 at 17:45 A l w a y s S u n n yA l w a y s S u n n y 38.6k99 gold badges6666 silver badges117117 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

If you want to send some value with javascript outside of polymer element, you may add at root level, like you may bind value into polymer. Sometine like :

index.html

<dom-bind>
<template> 
  <my-app my-prop = "{{myProp}}" ></my-app>
</template>
</dom-bind>
<script>
  var bindVal = document.querySelector('dom-bind');
  bindVal.myProp = "Test"
</script>

so in <my-app> element, you have a myProp property with "Test" value.

Since it was created in open mode you should be able to access it via node.shadowRoot. That said, shadow dom exists to isolate internal structures of aggregate elements, so you should first check if the iron-input custom element provides a public API which allows you to set the value.

Since you're mentioning end-to-end testing, I want to point out that Polymer provides its own, separate tool kit for that purpose.

Regardless of the technology/testing framework you'll end up with, take a look at the implementation of paper-input's tests, since they solve the exact problem you're facing. Understanding concepts like ponent lifecycle might be essential here.