自定義元素的<content>裏面的查詢元素

Question

我有兩個自定義元素。其中一個嵌套到另一個。事情是這樣的：

<polymer-element name="my-element"> 
    <template> 
    <div> 
    Bla, Bla, Bla! 
    </div> 
    </template> 
    <script type="application/dart" src="my_element.dart"></script> 
</polymer-element> 

<polymer-element name="my-decorator"> 
    <template> 
    <div> 
    <div>Decorator</div> 
    <content> 
     <!-- my-element will be here--> 
    </content> 
    </div> 
    </template> 
    <script type="application/dart" src="my_decorator.dart"></script> 
</polymer-element> 

使用index.html的兩個自定義元素：

<my-decorator> 
    <my-element></my-element> 
</my-decorator> 

我如何查詢的第二個元素的情況下從代碼中第一個的背後？

@CustomTag('my-decorator') 
class MyDecorator extends PolymerElement { 
    bool get applyAuthorStyles => true; 

    MyDecorator.created() : super.created() { 

    // TODO: 
    // get my-element instance here! 
    // .. 

    } 
} 

Answer 1

@override 
void attached() { 
    // attached is an example the code an be placed somewhere else 
    // but some places are executed before the childs are added 

    super.attached(); 

    var nodes = (shadowRoot.querySelector('content') as ContentElement).getDistributedNodes(); 

    var myElement = nodes.firstWhere((e) => e is MyDecorator); // not sure about this `e is MyDecorator` 
    // you have to choose some way to identify the node in the result 
    // I currently have no example where I can try it myself 
} 

如果標籤有一個id屬性像id='c1'那麼這個工程太

var nodes = ($['c1'] as ContentElement).getDistributedNodes();