Insert Custom Element into DOM dynamically from another View Model


Hi all,

I am trying to build a custom component that allows me to insert a Custom Element into the DOM based on user interaction. This needs to be achieved and conducted within a class and not in the HTML using compose.

I’ve been able to insert HTML templates into the DOM using the loadViewFactory method below.

export class MyClass {

constructor(private container: Container, private viewEngine: ViewEngine) { }

async createView(): Promise<void> {
  let factory = await this.viewEngine.loadViewFactory('path/to/template.html');

  this.view = factory.create(this.container.createChild());


The problem I’m having here is I can only load the HTML and not the whole Custom Element with View Model.

Is this even possible?


It’s possible. You can check @fkleuver work at and apply similar method.