Aspnetcore: Blazor BuildRenderTree with nested components throwing exception

[JosephGarrone]

The following BuildRenderTree method (in a class-only Blazor component deriving from LayoutComponentBase with no other methods or properties).

protected override void BuildRenderTree(RenderTreeBuilder builder)
{
    builder.OpenComponent(1, typeof(SomeControl));
    builder.OpenComponent(2, typeof(SomeControl));
    builder.CloseComponent();
    builder.CloseComponent();
}

Throws

warn: Microsoft.AspNetCore.Components.Browser.Rendering.RemoteRenderer[100]
      Unhandled exception rendering component: Error: No element is currently associated with component 7
Microsoft.AspNetCore.Components.Browser.Rendering.RemoteRendererException: Error: No element is currently associated with component 9
   at Microsoft.AspNetCore.Components.Rendering.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)
warn: Microsoft.AspNetCore.Components.Server.ComponentHub[0]
      Unhandled Server-Side exception
System.AggregateException: One or more errors occurred. (Error: No element is currently associated with component 7) ---> Microsoft.AspNetCore.Components.Browser.Rendering.RemoteRendererException: Error: No element is currently associated with component 9
   at Microsoft.AspNetCore.Components.Rendering.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)
   --- End of inner exception stack trace ---
---> (Inner Exception #0) Microsoft.AspNetCore.Components.Browser.Rendering.RemoteRendererException: Error: No element is currently associated with component 9
   at Microsoft.AspNetCore.Components.Rendering.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)<---

SomeControl is:

@inherits LayoutComponentBase

<div class="some-control">
    @Body
</div>

@code {

}

With an inner SomeControl component, only the top level is rendered in the DOM. If I remove the inner SomeControl component, then it renders fine. Note, this is a much cut-down version of the initial code that was causing this issue.

To Reproduce

Steps to reproduce the behavior:

1. Clone this minimum reproducible example
2. Run and see exception
3. Modify the commented lines in Renderer.cs
4. Run and see no exceptions

Expected behavior

The second component should render with out error. If it does need to error the error should be more specific (possibly?)

Versions

Visual Studio: 2019 16.2.0 Preview 2.0
.NET: 3.0.100-preview6-012264

[limefrogyank]

If you do it this way, it should work. Maybe this could be made better, but adding content to a component is not the same as adding content to an HTMLElement.

protected override void BuildRenderTree(RenderTreeBuilder builder)
{
    builder.OpenComponent(1, typeof(SomeControl));
    builder.AddAttribute(2, "ChildContent", (RenderFragment)((builder2) =>
    {
        builder2.OpenComponent(3, typeof(SomeControl));
        builder2.CloseComponent();
    }
    builder.CloseComponent();
}

[mkArtakMSFT]

Thanks for contacting us, @JosephGarrone.
@limefrogyank's suggestion is what you should do.

[JosephGarrone]

For anyone else coming across this in the future. Anything deriving from LayoutComponentBase requires "Body" as the attribute, anything deriving from ComponentBase requires "ChildContent" (Or possibly better, RenderTreeBuilder.ChildContent).