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'元素的列表.

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

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

如果您需要一些背景阅读,Polymer项目有一些指向Shadow DOM资源的链接.