Question

在过去的几个小时里，我一直在努力在我的Polymer项目中引用一个兄弟元素。想象一下以下设置：

/* 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?
  }
}

现在我可以从文档中获取app-main节点，但它无法获取兄弟元素。我试过通过shadowRoot获取兄弟元素但没有成功。

如何从app-siblingB或document获取兄弟元素，在本例中为shadowRoot？

Answer 1

你的兄弟姐妹在<app-main>的影子目录内。 document.querySelector()无法进入元素的shadowDOM。

这应该有效

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

请参阅Dart中的兄弟聚合物元素？

1 个答案: