What are the different ways to look up elements in Polymer 1.0

Question

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

Answer 1

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