Blazor - position component inside user content

[dennis-yemelyanov]

I have a requirement to dynamically put a Blazor component inside user-provided content. Essentially, the component is supposed to extend user-provided markup with some UI elements.

Let's say the user provides some content that can have a "greeting-container" element in it and the component should insert a greeting button inside that element.

My current solution is to call a JavaScript function to move the DOM element in OnAfterRenderAsync (full code below). It seems to work fine, but manipulating DOM elements seems to be discouraged in Blazor since it can affect the diffing algorithm. So I have a couple of questions on this:

1. How bad is it to move DOM elements like this? Does it cause performance issues, functional issues or some undefined behavior?
2. Is there a better way to achieve the same result without using JavaScript? I was considering using the RenderTreeBuilder for this, but it seems like it might not be designed for this purpose since it's recommended to use hardcoded sequence numbers, which doesn't seem possible when dealing with dynamic content not known at compilation time.

Current solution code:

Greeter.razor

@page "/greeter"

@inject IJSRuntime JSRuntime;

<div>
    @((MarkupString)UserContentMarkup)
    <div id="greeting">
        <button @onclick="ToggleGreeting">Toggle greeting</button>
        @if (isGreetingVisible) {
            <p>Hello, @Name!</p>
        }
    </div>
</div>

@code {
    [Parameter]
    public string UserContentMarkup { get; set; }

    [Parameter]
    public string Name { get; set; }

    private bool isGreetingVisible;

    private void ToggleGreeting()
    {
        isGreetingVisible = !isGreetingVisible;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeVoidAsync("moveGreetingToContainer");
    }
}

_Host.cshtml

window.moveGreetingToContainer = () => {
    var greeting = document.getElementById("greeting");

    var container = document.getElementById("greeting-container");

    container.appendChild(greeting);
}

UserContentTest.razor

@page "/userContentTest"

@inject IJSRuntime JSRuntime;

<h3>Testing user content</h3>

<Greeter UserContentMarkup=@userContentMarkup Name="John"></Greeter>

@code {
    private string userContentMarkup = "Some <b>HTML</b> text followed by greeting <div id='greeting-container'></div> and <i>more</i> text";
}

Expected result (after clicking "Toggle greeting"):

<div>
    Some <b>HTML</b> text followed by greeting
    <div id="greeting-container">
        <div id="greeting">            
            <button>Toggle greeting</button>            
            <p>Hello, John!</p>            
        </div>
    </div> and <i>more</i> text    
</div>

[Ariansh]

as you mentioned they suggest (and I think its a good idea) to not manipulate DOM elements directly while using Blazor.
but have you tried RenderFragments?

[dennis-yemelyanov]

Yeah I tried to find a way using RenderFragment or something similar, but it seems like all available solutions only work with content that is known at compile time and there is no way to create a component at runtime

[Ariansh]

what if you use a list? for example check the below code:

 <button @onclick=moveGreetingToContainer>Toggle greeting</button>
 @foreach(var item in GreatingList)
    {
        <p>Hello, John!</p>   
    }

List<string> GreatingList = new List<string>();
    protected void moveGreetingToContainer()
    {
        GreatingList.Add("<p>Hello, John!</p>");
        StateHasChanged();
    }