Dynamically added root components

Summary

Support rendering components dynamically after a blazor server or blazor webassembly application has started.

Motivation and goals

We want to improve the way you can add interactivity to an asp.net Core MVC or razor pages application by enabling components to be rendered directly from within JavaScript/HTML intead of just when the app has started.

This enables scenarios where an MVC application that is using JavaScript to add interactivity when an element is added to the dom, can instead leverage Blazor to implement the functionality associated with that component, enabling combining Blazor with existing JavaScript code in a mix and match fashion.

In scope

• Provide a set of APIs available through JavaScript that enable application authors to create new component instances on Blazor Webassembly and Blazor server.
• Enable passing parameters to a component from JavaScript

Out of scope

• Children content within a component. This is more complicated and would like want to take it out of the inital version and add support for it based on feedback.

Risks / unknowns

For server side Blazor there are security implications to this feature that we need to account for, like a limit on the number of components that can be rendered at any time or the list of components that can be rendered as well as their parameters.

Examples

Blazor.renderComponent(element, { componentName: "ShoppingCart" }, parameters: { shoppingCartId: "asdf" });

<shoppint-cart shopping-cart-id="asdf" />

[RChrisCoble]

Really hope this behavior makes it into .Net 6 capacity permitting. This would make Blazor far more palatable in a larger development organization that primarily uses Angular. Right now the argument is, “If you do that in Blazor you can’t use it anywhere else”.

If I have to hear that for the entirety of 2022 I will [cries in Blazor].

[SteveSandersonMS]

Done