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>s中的div（它们包含在<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 如果您需要一些背景阅读。