What are the different ways to look up elements in

There are several way in Polymer.dart 1.x to look up elements in the DOM. What are the differences.

  <body>
    <div id="top"></div>
    <app-element>
      <div id="child1"></div>
      <div id="child2"></div>
    </app-element>
    <script type="application/dart" src="index.dart"></script>
  </body>

<dom-module id='app-element'>
  <template>
    <button on-click="clickHandler">Query</button>
    <div id="shadow1"></div>
    <div id="shadow2"></div>
    <content></content>
  </template>
</dom-module>

The app_element.dart contains this import

import 'dart:html' as dom;

With shady DOM (default)

$["shadow1"] (works only for statically added elements)
- shadow1
dom.querySelectorAll('div')
- (a <div hidden> dynamically inserted by Polymer)
- top
- shadow1
- shadow2
- child1
- child2
querySelectorAll('div')
- shadow1
- shadow2
- child1
- child2
Polymer.dom(this).querySelectorAll('div')
- child1
- child2
Polymer.dom(this.root).querySelectorAll('div')
- shadow1
- shadow2
$$('div') (returns the first element found by this selector)
- shadow1

With shadow DOM (global setting to opt in)

$["shadow1"] (works only for statically added elements)
- shadow1
dom.querySelectorAll('div')
- (a <div hidden> dynamically inserted by Polymer)
- top
- child1
- child2
querySelectorAll('div')
- child1
- child2
Polymer.dom(this).querySelectorAll('div')
- child1
- child2
Polymer.dom(this.root).querySelectorAll('div')
- shadow1
- shadow2
$$('div') (returns the first element found by this selector)
- shadow1

Instead of .querySelectorAll(...) .querySelector(...) can be used of course but because it will always return one of the elements returned by .querySelectorAll(...) I didn't explicitely add these examples.

Enabling shadow DOM works the same in Polymer.dart 0.17 as explained here for Polymer.js