Dynamically added root components

[javiercn]

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" />

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.

[amdav]

I thought it worth commenting that I have been using something similar in production for about 12-months with much success. I am happy to share my learnings and/or code. My focus was doing this from any normal web page (including html pages or asp.net web forms, etc).

I have a "RemoteBlazor" library that just needs to be referenced, and CORS enabled to turn the feature on. Then I use the component on a site such as "test-site.com" and use javascript to load the blazor server component from Azure, such as from "test-components.azurewebsites.net".

I have implemented the ability to:

• Hook up javascript callbacks so the blazor component just uses EventCallback but the javascript code can be hooked up to that callback.
• Ability to set properties on the component from javascript.
• Settings properties, or wiring up events has been implemented by passing javascript objects (so I handle the serialization), rather than strings, so it is a clean API. I use the usual type converters, etc (but it is not perfect yet).

I also implemented a ResourceLoader component that makes it easy to inject scripts and stylesheets into the page hosting the remote blazor component (the kind of stuff you would have placed in your .cshtml hosting page if hosting via razor).

The only reason I have not shared this yet is because I am a little embarrassed by the same security issues you allude to above. I really need to define a way to register which components are exposed; or have attributes that need to be added to components if you want them (or certain properties) exposed on the javascript side.

Something I don't want to do - because I don't use web forms anymore (but somebody should): Implement a web forms hook where setting of parameters can be signed (on the web forms side), and verified on the blazor server side, to allow secure setting of parameters between a web forms app, and the blazor server app. This would be similar to how you initialize a component from a razor page, but done from a web forms page (where the actual blazor server component is remotely hosted)

Let me know if anyone on the team wants further information. Also understand you should be thinking more broadly than just adding these features to razor.cshtml pages.
Regards,
David