title: Angular 2: How to call the method on a nested component?
body: <p>I'm trying to call functions on an element declared in my Angular 2 component.
  The issue is that I don't know how to retrieve the element from my JS code.
  If I can pass the element from the template to the JS code, it works, but
  using <code>document.querySelector</code> does not return anything.</p>
  
  <p>Example code (<a href="http://plnkr.co/edit/XThNWKzTO3lhvw7ZpR9f" rel="nofollow">plunk</a>):</p>
  
  <pre><code>@View({
    template: `
      &lt;div&gt;
        &lt;span id="p1"&gt;{{name}}&lt;/span&gt;
        &lt;span #p2&gt;{{name}}&lt;/span&gt;
      &lt;/div&gt;
    `,
    encapsulation: ViewEncapsulation.Native
  })
  export class Person {
    sayHello(e) {
      p1 = document.querySelector('p1');
      console.log('p1:', p1)
      p2 = document.querySelector('p2');
      console.log('p2:', p2)
  
      alert('VanillaId: ' + (p1 ? p1.innerHTML : 'null') +
            '\nAngularId: ' + (p2 ? p2.innerHTML : 'null'));
    }
  }
  </code></pre>
  
  <p>I suspect that it has something to do with shadow dom, but I don't know how to
  get the shadow root and use it to do the query. <code>this</code> doesn't seem to expose
  anything useful to access the dom.</p>