Skip to content

Dynamically added root components #27574

@javiercn

Description

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

Metadata

Metadata

Labels

DoneThis issue has been fixedUser StoryA single user-facing feature. Can be grouped under an epic.affected-fewThis issue impacts only small number of customersarea-blazorIncludes: Blazor, Razor Componentsdesign-proposalThis issue represents a design proposal for a different issue, linked in the descriptionenhancementThis issue represents an ask for new feature or an enhancement to an existing onefeature-blazor-boot-upfeature-blazor-component-modelAny feature that affects the component model for Blazor (Parameters, Rendering, Lifecycle, etc)severity-blockingThis label is used by an internal tool

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions