title: How do I add an element at run time to a polymer custom element, with Dart?
body: <p>I am trying to create a ParagraphElement at run time and it to Div element in a polymer component as follows: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;polymer-element name="my-element" extends="div"&gt;
    &lt;template&gt;
      &lt;p&gt;
        &lt;button on-click="updateMessage" data-msg="You clicked Show"&gt;Show Message&lt;/button&gt;
        &lt;button on-click="updateMessage" data-msg="You clicked Hide"&gt;Hide Message&lt;/button&gt;
        &lt;button on-click="addPelement" &gt;Add P element&lt;/button&gt;            
      &lt;/p&gt;
      &lt;p id="message"&gt;{{ message }}&lt;/p&gt; &lt;!-- bind the message --&gt;
      &lt;div id="mydiv"&gt;&lt;/div&gt;  
    &lt;/template&gt;
    &lt;script type="application/dart" src="my_element.dart"&gt;&lt;/script&gt;
  &lt;/polymer-element&gt; 
  </code></pre>
  
  <p>and dart file is as follows:</p>
  
  <pre class="lang-dart prettyprint-override"><code>@CustomTag('my-element')
  class MyElement extends PolymerElement with ObservableMixin {
    @observable var message;
  
    void updateMessage(Event e, var detail, Element target) {
      message = target.attributes['data-msg']; // extract the data- attribute
    }
  
    void addPelement(Event e) {
      var item = new ParagraphElement (); 
      item.text="new p element";
      DivElement d = query("#mydiv");
      d.children.add(item);
    }
  }
  </code></pre>
  
  <p>The line query("#mydiv") returns a null element.</p>