Me gustaría construir dinámicamente un árbol de componentes basándose en alguna información recibida de las llamadas AJAX.

¿Cómo agregar un componente al DOM mediante programación desde dentro de otro componente? yo tengo<outer-comp> y me gustaría, basándome en alguna lógica, insertar un<inner-comp>. El siguiente código solo inserta los elementos.<inner-comp></inner-comp> al DOM, y no real<inner-comp> representación.

@NgComponent(
  selector: 'outer-comp',
  templateUrl: 'view/outer_component.html',
  cssUrl: 'view/outer_component.css',
  publishAs: 'outer'
)
class AppComponent extends NgShadowRootAware {      
  void onShadowRoot(ShadowRoot shadowRoot) {
    DivElement inner = shadowRoot.querySelector("#inner");
    inner.appendHtml("<inner-comp></inner-comp>");
  }
}

Actualizar: Me las arreglé para renderizar correctamente el componente interno de la siguiente manera, pero todavía no estoy seguro de si esta es la forma correcta:

class AppComponent extends NgShadowRootAware {
  Compiler compiler;
  Injector injector;
  AppComponent(this.compiler, this.injector);

  void onShadowRoot(ShadowRoot shadowRoot) {
    DivElement inner = shadowRoot.querySelector("#inner");
    inner.appendHtml("<inner-comp></inner-comp>");    
    BlockFactory template = compiler(inner.nodes);
    var block = template(injector);
    inner.replaceWith(block.elements[0]); 
  }

}