// first we need an componentInjector to initialize the component.
// here the injector is from outside of Custom Element, user can register some of their own
// providers in it.
const componentInjector = Injector.create({providers: [], parent: injector});
// analyze projectable nodes from element
// for example:
// <app-hello>
//   <div class="inside">some projection content</div>
// </app-hello>
const projectableNodes = injector.get(ComponentFactoryResolver).resolveComponentFactory(component);
// Here we got all we need, we will initialize the component
const componentRef = componentFactory.create(componentInjector, projectableNodes, element);

// Then we need to check whether we need to initialize value of component's input
// the case is, before Angular Element is loaded, user may already set element's property.
// those values will be kept in an initialInputValues map.
componentFactory.inputs.forEach(prop => componentRef[prop] = initialInputValues.get(prop));

// and we will also stream Component's @Output -> Element's EventEmitter
initializeOutputs();

// then we will trigger a change detection so the component will be rendered in next tick.
changeDetectorRef.detectChanges();

// finally we will attach this component's HostView to applicationRef
applicationRef.attachView(this.componentRef.hostView);