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

[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.

[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

[javiercn]

A similar request #26425

[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.

[adamhathcock]

Is this similar to #13766 ? I think the wording makes it sound like if this work is done then I can render a blazor server component via Javascript dynamically.

[javiercn]

@adamhathcock if we decide to implement it for server side blazor. There are additional security concerns that we need to address in that case. However, we take note of your interest on having it support SSB

[adamhathcock]

Thanks for letting me know.

My desire is ported a back office Angular LOB app to Blazor in a piecemeal fashion. SSB is better suited to the use-case I think but even looking to embed WASM controls would be a win for me I think.

Looking forward to this.

[javiercn]

@adamhathcock can you upvote the top first comment? It helps our tooling do a better job at capturing the interest.

[Xyncgas]

Thanks for the works I love you people, GIVE ME FIVE !

[Xyncgas]

I am really excited for this feature, this just makes me think about it again how much convinience I've gotten for .net and the things I am able to do, you guys are good at what you are doing and I appreciate it.

[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].

[RChrisCoble]

SteveSandersonMS assigned SteveSandersonMS

No sweeter words were ever read. :)

[RChrisCoble]

@SteveSandersonMS just to put an extremely fine point on this feature. This will allow hosting Blazor components inside of an Angular application, correct?

[SteveSandersonMS]

@RChrisCoble That’s certainly the intention!

It should make the inclusion of a Blazor component equivalent to including any other arbitrary web component. To what extent other frameworks like Angular/React/Vue behave well with that is of course up to them, but in general I expect good results.

[SteveSandersonMS]

Done

[RChrisCoble]

Well that was fast @SteveSandersonMS ! Any idea when we'll get to kick the wheels on this feature?

[boukenka]

@RChrisCoble According to the milestone, it should be for RC1, which is scheduled for 14 September 2021.

[RChrisCoble]

But that's like 4,320,000,000 milliseconds away, an eternity in computer time!