CODEWITHSUNDEEP
javascriptdompolymershadow-dom
A l w a y s S u n n y
A l w a y s S u n n y

Reputation: 38552

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

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

Upvotes: 4

Views: 2003

Answers (3)

Cappittall
Cappittall

Reputation: 3441

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.

Upvotes: 3

craPkit
craPkit

Reputation: 653

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 component lifecycle might be essential here.

Upvotes: 2

the8472
the8472

Reputation: 43150

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.

Upvotes: 2

Related Questions