dart - Polymer.dart 如何查询子自定义元素的影子根内的节点

Question

我有一个父组件作为其他组件的容器。我希望容器能够查询其组件内的元素。比如我的外部组件是:

<polymer-element name="task-dart">
  <template>
      <div class="task-list">
        <template repeat="{{tasks}}">
          <task-row task="{{}}"></task-row>
        </template>
      </div>
  </template>
  <script type="application/dart" src="taskdart.dart"></script>
</polymer-element>

我的内部组件是:

<polymer-element name="task-row" attributes="task">
  <template>
      <div class="task">
         <!-- html components of the task -->
      </div>
  </template>
  <script type="application/dart" src="task_row.dart"></script>
</polymer-element>

但是 taskdart.dart 中的以下两个都不产生任何结果:

void created() {
    super.created();

    print(queryAll(".task").toString()); // []
    Timer.run( () {
        print("queryAll: " + queryAll(".task").toString()); // []
    });
} 

这是因为 css 在内部组件中作用域，还是因为在初始化期间此时没有任何可查询的内容？无论哪种方式，我该如何解决？

Answer 1

尝试使用 shadowRoot .它仍然不会完全按照您的要求进行操作(但是，获取 `.task' 元素的列表。

自动地， polymer 元素的顶级内容 <template>被放入阴影根。这意味着 task-dart无法查询子项中的 div <task-row> s(它们包含在 <task-row> 的影子根中)，它只能查询它自己的影子根以获取任务行列表。

Timer.run( () {
  print("queryAll: " + this.shadowRoot.queryAll("task-row").toString()); // [task-row, task-row, task-row, task-row]
});

Polymer project has some links to Shadow DOM resources如果您需要一些背景阅读。