Angular 13 how to create dynamic component with inputs and outputs outside app-root?

Question

I've tried everything to find a solution online and did research for days now but I'm unable to understand Angulars current concept of lazy loading module / components WITHOUT the router.

My overall scenario:

In my case my Angular App is only loaded as a part of a bigger page. I have placeholder distributed on that page like <div id="first-comp-container">. Now when my App is loaded I want to lazy load modules/libraries. Some of the modules need some sort of configuration. Once a module is loaded I want to create a component from that package and render it inside one off the placeholder.

My dynamic components have inputs and output events.

Problem for this question:

I know in Angular 13 I can lazy load a component with await syntax and create it dynamically with viewContainerRef.createComponent(). But the viewContainer is always for the component itself or it's ViewChilds. With the deprecated componentFactoryResolver I was able to render a dynamic component elsewhere also outside app-root:

const myCompFactory = this.cfr.resolveComponentFactory(MyComponent);
const myCompNode = document.getElementById("dom-node-outside");
const myComponent = myCompFactory.create(this.vcRef.injector, [], myCompNode);

So how can I achieve that in the current Angular way? Is there really no way to create an Angular component in a DOM node outside app-root? Angular Elements also don't seem appropriate for that because I create my components only from within Angular Framework for a single project and don't want to share them in any way.

Also if I create a component dynamically I can only pass input once on the instance. What if I want to keep that lazy loaded instance and pass in a new input value later?