Query elements inside <content> of a custom element

Question

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!
    // ..

  }
}

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
}

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

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