Render a component at a specific position in the DOM

As working with the DOM in Blazor has its limitations, what is the current recommendation for displaying popups like dialogs at specific positions on the page?

For example, showing a window/dialog on a button click inside a Blazor component requires the popup element to be appended to a specific element (let’s say the body) in order to be displayed over all other elements on the page. However, there is also the case for showing a popup inside another popup, so basically the position might be determined based on certain conditions.

One way to solve this might be to render a “special” element by using the idea of @(await Html.RenderComponentAsync<App>()) and then use JS interop to manually move elements from their original position to the desired one. However, this will probably break the diffing algorithm.

Are there any better ways to handle this?

[SteveSandersonMS]

Oh wait I think I do understand you now. When talking about positions, you mean positions inside the DOM (like, which other element it’s nested inside), not the position it gets rendered to on the screen.

The initial feature set we’re going for is similar to other SPA frameworks. So for example if you wanted to render a tooltip that moves to whatever button the mouse is hovering over, you could either:

• Have a <MyTooltip> inside each such button, with it being coded to render nothing by default, but render something visible when the mouse hovers over its parent (which itself could be achieved through CSS, or procedural logic with the parent issuing some state change when it gets a mouseover/mouseout event)
• Or, render one global “tooltip” somewhere with display:none; position:absolute then use JS interop to move it around and change the visibility on demand.

[egil]

Stamo, if you cannot or do not want a component rendered behind a @if(condition) clause in each place it might show up, and if rendering it in one place and moving (or cloning/copying it) via JavaScript breaks the diff algo, the a third option could be to render the needed markup to screen using MarkupString class. That might render it as basic HTML that the diff algo doesn’t care about, and you can then move that around as you want with JavaScript.

@SteveSandersonMS can you tell us if the diff algo will break if we use JavaScript to add new HTML inside HTML generated by a component, if the added HTML doesn’t contain the “tracking comments” ()?