Blazor中RenderFragment内容为何未被包含在table组件内？

我有一个简单的Blazor项目，包含主页和对Razor组件库的引用。该库中的Grid组件试图将RenderFragment插入<table>元素中，但生成的HTML不符合预期——RenderFragment输出的内容跑到了<table>外部。

项目代码展示 #

主页代码 #

@page "/"

<Grid Data="_data">
    <Rows Context="context">
        @context.Name
    </Rows>
</Grid>

@code {
    private List<Item> _data = null!;

    private class Item
    {
        public string Description { get; set; } = null!;
        public string Name { get; set; } = null!;

        public static Item Placeholder() => new() { Description = "foo", Name = "bar" };
    }

    protected override void OnInitialized()
    {
        _data = [Item.Placeholder(), Item.Placeholder()];
    }
}

Razor组件库代码 #

Grid.razor

@typeparam T

<table>
    @if (Data is not null)
    {
        @foreach (T row in Data)
        {
            @Rows(row)
        }
    }
</table>

Grid.razor.cs

using Microsoft.AspNetCore.Components;

public partial class Grid<T> : ComponentBase
{
    [Parameter, EditorRequired]
    public List<T>? Data { get; set; }
    
    [Parameter, EditorRequired]
    public required RenderFragment<T> Rows { get; set; }
}

生成的HTML结果 #

<body>
    barbar
    <table></table>
</body>

原因分析 #

这是浏览器的HTML纠错机制导致的：HTML规范要求<table>的直接子元素必须是<thead>、<tbody>、<tfoot>或<tr>这类合法的表格结构元素。当你直接在<table>内部渲染文本节点（这里@Rows(row)输出的是bar文本），浏览器会判定这是非法内容，自动将其移到<table>外部，从而出现你看到的结果。

解决方案 #

修改Grid.razor，将RenderFragment的内容包裹在合法的表格结构元素（<tr>和<td>）中，确保符合HTML规范：

@typeparam T

<table>
    @if (Data is not null)
    {
        <tbody>
            @foreach (T row in Data)
            {
                <tr>
                    <td>
                        @Rows(row)
                    </td>
                </tr>
            }
        </tbody>
    }
</table>

这样修改后，RenderFragment输出的内容会被正确包含在<table>内部的表格单元格中，生成的HTML结构也符合规范。

内容的提问来源于stack exchange，提问作者Throwaway67429