如何使用Dart在运行时将某个元素添加到聚合物定制元素中？

Question

我想在运行时创建的ParagraphElement中和它Div元素中的聚合物组分如下：

<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> 

和镖文件如下：

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

行查询（” #mydiv“）返回一个空元素。

Answer 1

需要新的元素添加到ShadowRoot

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

Answer 2

您需要使用下面的代码来访问你的div元素：

DivElement d = $['mydiv'];