Calling Bootstrap() on two root Components of the same class in Angular2?

Question

I have found that when bootstrap() is called it will match a class instance to a selector on the DOM and insert a shadow DOM.

Therefore, in order to try to get two root Components of the same class bootstrapped, I have specified a distinct 'selector' on each.

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 '_hostElement.nativeElement'.

Ex:

The following prints the annotation meta showing the '_hostElement.nativeElement'.

console.log(Reflect.getMetadata('annotations', AppComponent));

for the following class declaration:

export class AppComponent {

constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) {
  console.log('annotations');
  console.log(Reflect.getMetadata('annotations', AppComponent));

  }
}

This is how I bootstrap each instance so that they have distinct selectors:

bootstrap( Component({
  selector: 'my-app-' + id,
  encapsulation: ViewEncapsulation.Emulated,
  template: `<p>Dynamic Component {{message}}</p>`
 })(AppComponent)).then(app => {
    //app['_hostElement'].nativeElement =  `<div class="Ng2"><h1>Angular 2-${this.context.instanceId}</h2><my-app-${this.context.instanceId}/></div>`
    console.log(app['_hostElement'].nativeElement);
    console.log('Bootstrap Successful');
    console.log(app);
}, err => {
    console.error(err);
});

The above bootstrap function returns a Promise, which is successful for both instances, contrary to what one would expect.

When I inspect the DOM, I can see that there are two distinct 'selector' tags that identify the root apps as intended, but as pictured below - the bootstrapped components 'ComponentRef_' points to the same '_hostElement.nativeElement'.

[Here is the 'ComponentRef_' of the bootstrap call - both call's return the same ComponentRef_][1]

How can I get two root components of the same class to play nicely?