title: Polymer : this.$[elementId] is undefined
body: <p>Here is a simple polymer element which just access an inner element using its id and <code>this.$.[elementId]</code>, and then log it. Running, this simple code, you will be able to see that the returned element <code>undefined</code>. Why?</p>
  <pre><code>&lt;dom-module id=&quot;custom-element&quot;&gt;
    &lt;template&gt;
            &lt;template is=&quot;dom-if&quot; if=&quot;[[condition]]&quot;&gt;
               &lt;div id=&quot;main&quot;&gt;&lt;/div&gt;
            &lt;/template&gt;
    &lt;/template&gt;
  
    &lt;script&gt;
      class CustomElement extends Polymer.Element {
        static get is() { return &quot;custom-element&quot;; }
              static get properties() {
                  return {
                     condition : Boolean
                  };
              }
  
              ready(){
                  super.ready();
                  console.log(this.$.main); // logs &quot;undefined&quot;
              }
      }
      
      customElements.define(CustomElement.is, CustomElement);
    &lt;/script&gt;
  
  &lt;/dom-module&gt;
  </code></pre>