title: Renderer multiple selectRootElement Issue
body: <p>I am trying to use Renderer.selectRootElement to get some elements from my Component, as described <a href="https://stackoverflow.com/questions/36036885/how-to-find-element-in-a-component/36037121#36037121">here</a>.</p>
  
  <p>Everything works fine, unless I select only one element (<a href="http://plnkr.co/edit/pofXHp6yiko61nCpImWV?p=preview" rel="nofollow noreferrer">plnkr</a>).</p>
  
  <p>As you can see, I have created a component:</p>
  
  <pre><code>export class ExampleComponent implements OnInit{
      @Input() start: any;
      @Input() end: any;
  
    constructor(public _renderer:Renderer){
  
    };
  
      ngOnChanges(){
  
      }
      ngOnInit(){
          console.log("NG ON CHAN START DATE",this.start);
          console.log("NG ON INIT END DATE",this.end);
          var container =  this._renderer.selectRootElement('.container');
          console.log(container);   
          var inner1 =  this._renderer.selectRootElement('.inner1');
          console.log(inner1);   
          var inner2 =  this._renderer.selectRootElement('.inner2');
          console.log(inner2);   
      }
  
  }
  </code></pre>
  
  <p>When I try to run this, I have an error of :</p>
  
  <blockquote>
    <p>EXCEPTION: The selector ".inner1" did not match any elements in [{{exampleData.end}} in MainViewComponent@3:65]</p>
  </blockquote>
  
  <p>(however, in my app, when only the first container is found, then none others are found).</p>
  
  <p>Any ideas where does this come from?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I found out that the directive is not invoked fully - only div with class <code>container</code> gets added to the HTML.</p>
  
  <p><a href="https://i.stack.imgur.com/ftKWN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ftKWN.png" alt="enter image description here"></a></p>