Access Web Component's local DOM (from outside) and set value to its children

user_1138192 0
Viewed 1434

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 accomplish, on the HTML element with my JavaScript selector, on #shadow-root (open).

html element tree

shadow-dom polymer dom javascript
3 Answers

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.

user_13627550
Related