title: Calling Bootstrap() on two root Components of the same class in Angular2?
body: <p>I have found that when <em>bootstrap()</em> is called it will match a class instance to a selector on the DOM and insert a shadow DOM. </p>
  
  <p>Therefore, in order to try to get two root Components of the same class bootstrapped, I have specified a distinct <em>'selector'</em> on each. </p>
  
  <p>However, while each component gets bootstrapped with a distinct 'selector', if I look at each Component's annotation metadata, they both are pointing to the same <em>'_hostElement.nativeElement'</em>. </p>
  
  <p>Ex: </p>
  
  <p>The following prints the annotation meta showing the <em>'_hostElement.nativeElement'</em>.</p>
  
  <pre><code>console.log(Reflect.getMetadata('annotations', AppComponent));
  </code></pre>
  
  <p>for the following class declaration:</p>
  
  <pre><code>export class AppComponent {
  
  constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) {
    console.log('annotations');
    console.log(Reflect.getMetadata('annotations', AppComponent));
  
    }
  }
  </code></pre>
  
  <p>This is how I bootstrap each instance so that they have distinct selectors:</p>
  
  <pre><code>bootstrap( Component({
    selector: 'my-app-' + id,
    encapsulation: ViewEncapsulation.Emulated,
    template: `&lt;p&gt;Dynamic Component {{message}}&lt;/p&gt;`
   })(AppComponent)).then(app =&gt; {
      //app['_hostElement'].nativeElement =  `&lt;div class="Ng2"&gt;&lt;h1&gt;Angular 2-${this.context.instanceId}&lt;/h2&gt;&lt;my-app-${this.context.instanceId}/&gt;&lt;/div&gt;`
      console.log(app['_hostElement'].nativeElement);
      console.log('Bootstrap Successful');
      console.log(app);
  }, err =&gt; {
      console.error(err);
  });
  </code></pre>
  
  <p>The above bootstrap function returns a Promise, which is successful for both instances, contrary to what one would expect.</p>
  
  <p>When I inspect the DOM, I can see that there are two distinct <em>'selector'</em> tags that identify the root apps as intended, but as pictured below - the bootstrapped components <em>'ComponentRef_'</em> points to the same <em>'_hostElement.nativeElement'</em>.</p>
  
  <p>[Here is the 'ComponentRef_' of the bootstrap call - both call's return the same ComponentRef_<a href="http://i.stack.imgur.com/L2vJt.png" rel="nofollow">][1]</a></p>
  
  <p>How can I get two root components of the same class to play nicely?</p>