RootComponents multiple times on same page AFTER program main method has completed (Using Blazor Wasm for multiple / distinct areas of page)

[mathias999us]

I'd like to broach the topic described in #20855 again. I think the hack described in #20855 (comment) is cute, but it doesn't solve a fundamental barrier to incremental migration to blazor wasm for large existing code bases: We need to be able to attach specific blazor components to specific DOM elements on the fly, throughout the page's lifecycle.

Background: we have a large enterprise-scale investment (many millions of lines of code) in a Microsoft Web-Api RESTful application with knockout.js for the client. We very much desire to migrate to Blazor WASM, however, we need a stepping stone approach that will allow us to incrementally work towards that goal. This will require us to embed blazor components within existing UI that is built using knockout, and to be able to do so on the fly as UI is rendered on the page in response to user actions.

With knockout, we've been able to mix and match with the prior technology that was in use, using a custom "stopBinding" binding, that tells knockout not to traverse further (i.e. "hey knockout, this DOM node and its children are managed by another technology").

I have a proof-of-concept working where a simple counter control built using our existing knockout framework can communicate with an equivalent blazor component via the javascript interop, and vice versa. I'd like to go through and replace all of our knockout counter controls in our various forms and larger more complex controls with a blazor counter that provides an appropriate API for our knockout framework via the javascript interop. However, because of the way RootComponents for blazor wasm are specified, I would not be able to embed this blazor component within a larger form / control based on knockout that doesn't exist when the page until the user initiates some action during.

It seems that with the Program Main method in blazor wasm, you get a single opportunity to attach blazor components to RootComponents via WebAssemblyHostBuilder. Once it is built, you can no longer attach blazor functionality to new DOM elements. If the DOM elements you want to attach blazor functionality to don't exist when the page first loads (and the blazor app starts), there is no approach I am aware of.

Without an approach to incremental migration, it will not be possible for us to move to blazor wasm. We cannot just rewrite from the ground up.

If I'm mistaken, and there's a technique for accomplishing what I am describing, can someone provide a reference? Otherwise, can the blazor wasm team consider adding functionality for the addition of root components after the program main routine has completed?

Appreciate your time and any input. Thanks,
Mathias

[javiercn]

@mathias999us thanks for contacting us.

This is not something we currently support, but it might be something we look for in a future release.

[ghost]

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. We will evaluate the request when we are planning the work for the next milestone. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[javiercn]

Closing in favor of #27574 go ahead and upvote that issue instead to help us track interest