How to find element in nested template

Question

Polymer element is defined as follows:

<polymer-element name="my-element">
    <template>
       <template if="{{show==true}}">
           <div on-click="{{hideMe}}"> click to hide my div </div>
           <div id="mydiv">
               my div content here
           </div>
       </template>
     </template>
 </polymer-element>

And Dart code is as follows:

@CustomTag('my-element')
@observable bool show = true;

 hideMe(){
    Element e = $['mydiv'];
    e.hidden = true;
 }

Code does not work as $['mydiv'] returns null. How to find an element in nested template in Dart polymer component?

Answer 1

Why would you want to do that? <template if removes the nodes from the DOM when show == false. All you have to do is

In HTML

`on-click='{{hide}}'` 

In Dart

void hide() {
  show = false;
}

If you don't want to hide the <div on-click='...> move it outside the <template if=...>

Hint: If your show field is of type bool you can simplify to

 <template if="{{show}}">

Answer 2

Yes, $['id'] seems to fail with nested templates. But there is also the more verbose way, which works.

Element e = this.shadowRoot.querySelector("#mydiv");