How do I add an element at run time to a polymer custom element, with Dart?

Question

I am trying to create a ParagraphElement at run time and it to Div element in a polymer component as follows:

<polymer-element name="my-element" extends="div">
  <template>
    <p>
      <button on-click="updateMessage" data-msg="You clicked Show">Show Message</button>
      <button on-click="updateMessage" data-msg="You clicked Hide">Hide Message</button>
      <button on-click="addPelement" >Add P element</button>            
    </p>
    <p id="message">{{ message }}</p> <!-- bind the message -->
    <div id="mydiv"></div>  
  </template>
  <script type="application/dart" src="my_element.dart"></script>
</polymer-element> 

and dart file is as follows:

@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);
  }
}

The line query("#mydiv") returns a null element.

Answer 1

needed to add new element to ShadowRoot

DivElement d =  this.shadowRoot.query("#mydiv");

Answer 2

You need to use the following code to access your div element:

DivElement d = $['mydiv'];