请参阅Dart中的同级聚合物元素？

Question

For the past few hours I have been struggling to refer to a sibling element within my Polymer project. Imagine the following setup:

/* main.html */
<link rel="import" href="siblingA.html">
<link rel="import" href="siblingB.html">

<polymer-element name="app-main">
    <template>
        <app-siblingA></app-siblingA>
        <app-siblingB></app-siblingB>
    </template>
    <script type="application/dart" src="main.dart"></script>
</polymer-element>

/* siblingA.html, nothing special about it */
<polymer-element name="app-siblingA">
    <template>
        <button on-click="{{doSomething))">Do something</button>
    </template>
    <script type="application/dart" src="siblingA.dart"></script>
</polymer-element>

/* siblingA.dart */
import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('app-siblingA')
class SiblingA extends PolymerElement {
  bool get applyAuthorStyles => true;

  SiblingA.created() : super.created() {
  }

  void doSomething(MouseEvent e, var detail, Node target) {
    var profile = document.querySelector('app-siblingB');
    print(profile); // This is always null, why?
  }
}

Now I can get my app-main node from the document, but it fails on getting sibling elements. I have tried getting the sibling element via the shadowRoot without success.

How can I get a sibling element, in this case app-siblingB , from the document or shadowRoot ?

Answer 1

Your siblings are within the shadowDOM of <app-main> . document.querySelector() doesn't reach into the shadowDOM of an element.

This should work

(parentNode as ShadowRoot).querySelector('app-siblingB');