How to find an HTML element inside a Polymer template

2
votes

I'm using Dart and Polymer 1.0.0-rc.9. I have my own element (simplified here of course):

<dom-module id="something">
 <style>
 </style>

 <template>
   <paper-slider id='myslider'></paper-slider>
   <div id='mydiv'></div>
 </template>
</dom-module>

On the Dart side, if I do:

 var div=queryselector('#mydiv')

it returns null.

I then set:

 <template is='dom-bind'>

it finds it. But that creates errors, which say I must use a simple template.

So how do I find my <div> element?

2
dartpolymer-1.0dart-polymer
Your question doesn't show how things are connected. Can you please add the HTML of your index.html and the Dart code of your something element. Hint: Custom elements must have a - in the name like <dom-module id="some-thing">. Where is this code var div=queryselector('#mydiv') called from? - Günter Zöchbauer
See also stackoverflow.com/questions/29629492/… and stackoverflow.com/questions/32703490/… - Günter Zöchbauer
Many thanks. This one worked for me var listdivs = Polymer.dom (this.root) .querySelectorAll('div'); cheers, s - Lymp

2 Answers

1
votes

Use 

var listdivs = Polymer.dom (this.root).querySelectorAll('div');
0
votes

It's likely because you're calling 

 var div=queryselector('#mydiv')

outside that Polymer Element. I'm not sure, but I'm guessing the ID's within the 'something' element are only available from within it.

Your best course of action would be to give your element an ID wherever you declared it. 

<something id="something"></something>

then access the children of the element

 var elm =queryselector('#something');
var children = Polymer.dom(elm).children[1];