Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

dart - Query elements inside <content> of a custom element

I have two custom elements. The one of them is nested to another one. Something like this:

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

using both custom elements in index.html:

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

How can I query the instance of the second element from the code behind of the first one?

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

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

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

  }
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
@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
}

if the tag has an id attribute like id='c1' then this works too

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...