Polymer.dart How to query for nodes inside the shadow root of a child custom element

Question

I have a parent component that serves as a container for other components. I want the container to be able to query for elements inside it's component. For example, my outer component is:

<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>

And my inner component is:

<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>

But the neither of the following in taskdart.dart produce any results:

void created() {
    super.created();

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

Is this because the css is scoped in the internal component, or is because there's nothing to query at this point during initialization? Either way, how would I fix it?

Answer 1

Try using the shadowRoot. It still won't do exactly what you're after (getting a list of the `.task' elements, however.

Automatically, the contents of a polymer-element's top-level <template> is put into the shadow root. That means that the task-dart can't query for div's in the child <task-row>s (they're contained within the <task-row>'s shadow root), it can only query it's own shadow root to get the list of task rows.

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

The Polymer project has some links to Shadow DOM resources if you need some background reading.