title: this.shadowRoot.querySelector('#upload') return always null Polymer 2.x
body: <p>I'm having trouble accessing an element in the following <code>dom-if</code> template to add a custom event listener:</p>
  
  <pre><code>&lt;template is="dom-if" if=[[!uploaded]]&gt;
      &lt;vaadin-upload id="upload" target="http://localhost:3000/uploadFile" form-data-name="doc" max-files="1"&gt;
          &lt;iron-icon slot="drop-label-icon" icon="description"&gt;&lt;/iron-icon&gt;
          &lt;span slot="drop-label"&gt;....&lt;/span&gt;
      &lt;/vaadin-upload&gt;
  &lt;/template&gt;
  &lt;template is="dom-if" if="[[uploaded]]"&gt;
        &lt;pdf-element src=[[....]]&gt;&lt;/pdf-element&gt;
  &lt;/template&gt; 
  </code></pre>
  
  <p>I tried to add event listeners for <code>upload-response</code> and <code>upload-success</code> in the <code>connectedCallback</code> this way:</p>
  
  <pre><code>connectedCallback() {
      super.connectedCallback();
      console.log(this.shadowRoot.querySelector('#upload'))
      this.shadowRoot.querySelector('#uploadFile').addEventListener('upload-response', event=&gt;this._uploadFile(event))
      this.shadowRoot.querySelector('#uploadFile').addEventListener('upload-success', event=&gt;this._uploadFileSuccessful(event))
    }
  </code></pre>
  
  <p>The <code>uploaded</code> property is <code>false</code> by default. I searched in the <a href="https://www.polymer-project.org/2.0/docs/devguide/dom-template#node-finding" rel="nofollow noreferrer">Polymer 2.0 docs</a>, and didn't find a way to make it work. I always get <code>null</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/UbT5y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UbT5y.png" alt="console screenshot"></a></p>
  
  <p>I have already used <code>this.shadowRoot.querySelector</code> in <code>dom-repeat</code> template without a problem. How do I make <code>querySelector</code> work with the <code>dom-if</code>?</p>