title: How to select template element by ID in Angular 2 Dart?
body: <p>Relativley new to Angular and Dart I have the following problem:</p>
  
  <p>my_component.dart:</p>
  
  <pre><code>import 'package:angular2/core.dart';
  import 'package:angular2_components/angular2_components.dart';
  
  import 'package:google_maps/google_maps.dart';
  import 'dart:html';
  
  
  @Component(
    selector: 'google-route-map',
    styleUrls: const ['my_component.css'],
    templateUrl: 'my_component.html',
    directives: const [materialDirectives],
    providers: const [materialProviders],
  )
  class MyComponent {
  
    MyComponent() {
  
      var m = querySelector("#my-canvas");
  
      print (m); // is null
  
      // do something with m....
    }
  }
  </code></pre>
  
  <p>my_component.html:</p>
  
  <pre><code>&lt;div id="my-canvas"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>As far as I have understood the problem is that <code>querySelector</code> queries <em>only the base dom not the shadowDom</em>. </p>
  
  <p>However how do I simply query an id within my template?</p>