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='c1'之类的id属性，那么这也适用

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

查询自定义元素</content>的<content>内的元素

1 个答案: