title: Dart Web UI: How do I get a reference to an item within in a web component?
body: <p>If I add a number of web components to my app as in myapp.html below:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;link rel="components" href="package:xclickcounter/xclickcounter.html"&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;div id="container1"&gt;&lt;x-click-counter&gt;&lt;/x-click-counter&gt;&lt;/div&gt;
     &lt;div id="container2"&gt;&lt;x-click-counter&gt;&lt;/x-click-counter&gt;&lt;/div&gt;
     &lt;div id="container3"&gt;&lt;x-click-counter&gt;&lt;/x-click-counter&gt;&lt;/div&gt;
     &lt;div id="container4"&gt;&lt;x-click-counter&gt;&lt;/x-click-counter&gt;&lt;/div&gt;
     ...
  &lt;/body&gt;
  </code></pre>
  
  <p>And I have number of elements in my web component as in xclick-counter.html below:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;&lt;body&gt;
    &lt;element name="x-click-counter" constructor="CounterComponent" extends="div"&gt;
      &lt;template&gt;
        &lt;button id="button1" on-click="increment()"&gt;\\\Increment me&lt;/button&gt;
        &lt;button id="button2" on-click="decrement()"&gt;Decrement me&lt;/button&gt;
        &lt;span&gt;(click count: {{count}})&lt;/span&gt;
      &lt;/template&gt;
    &lt;/element&gt; 
  &lt;!-- more below... --&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>How do i get a reference to #button2 in the web component in #container3 from myApp.dart?</p>
  
  <p>I would expect that i can get a reference as below but my reference turns out to be null:</p>
  
  <pre class="lang-dart prettyprint-override"><code>var reference=document.query('#container1').query('#button2');
  </code></pre>