Access the local DOM of the web component (externally) and set the value for its children

Question

I have a web application that is developed using polymer and wants to realize through testing using JavaScript. This is why I am trying to programmatically set some value, but I cannot access the local DOM of the element: either

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

Someone told me that it is not possible to directly obtain shadow root elements and set a value for them . So my main question is: how can I access the shadow DOM element and set the value for my children ?. Please let me know if this is possible, and if so, please share some solution.

Take a screenshot to get a clearer picture of what I'm trying to accomplish in the HTML element with my JavaScript selector, in # shadow-root (open) .

Answer 1

Since it was created in open mode , you must have access to it through node.shadowRoot . However, shadow dom exists to isolate the internal structures of aggregate elements, so you should first check to see if the user element contains a iron-inputpublic API that allows you to set the value.

Answer 2

, , Polymer , .

/, , paper-input , , . , , .

Answer 3

javascript , root, , . :

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>

<my-app> myProp "Test".