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 project has some links to Shadow DOM resources如果您需要背景阅读。

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

1 个答案: