为何无法与Blazor渲染的HTML <template>元素交互？

1. Blazor对template的非标准渲染 #

Blazor的渲染系统基于自身虚拟DOM实现，不会遵循浏览器对<template>的默认解析规则：

• 标准<template>会将内部内容隔离到content属性对应的DocumentFragment中，元素自身没有子节点；
• 但Blazor会直接把渲染后的ChildContent作为子节点插入到<template>元素本身，而非移入content容器。这就是你看到内容在#document-fragment里，但无法通过template.content访问的原因——这个片段是<template>自身的子节点容器，而非标准的template内容容器。

2. textContent生效的特殊原因 #

标准<template>的textContent返回空字符串，因为浏览器会隔离其内部内容。但Blazor直接把内容放在了<template>的子节点位置，此时textContent会读取这些子节点的文本内容，因此能返回预期结果。

3. Blazor的设计逻辑 #

Blazor将<template>当作普通容器元素处理，没有触发浏览器对<template>的特殊解析行为。它的核心是渲染组件的RenderFragment内容，而非严格实现原生HTML元素的所有规范。

访问现有template内容 #

直接通过<template>元素的子节点API访问：

const blazorTemplate = document.querySelector('template[data-markdown="true"]');
// 获取内部的div元素
const contentDiv = blazorTemplate.firstElementChild;
// 或遍历所有子元素
const children = blazorTemplate.children;

生成标准template元素 #

如果需要符合浏览器规范的<template>，可以通过JS互操作手动创建：

@inject IJSRuntime JSRuntime

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && ChildContent != null)
        {
            // 将ChildContent渲染为HTML字符串，再传给JS创建标准template
            var contentHtml = await RenderFragmentToStringAsync(ChildContent);
            await JSRuntime.InvokeVoidAsync("createStandardTemplate", contentHtml);
        }
    }

    // 辅助方法：将RenderFragment转为HTML字符串
    private async Task<string> RenderFragmentToStringAsync(RenderFragment fragment)
    {
        using var writer = new StringWriter();
        await Task.Run(() => fragment(writer));
        return writer.ToString();
    }
}

对应的JavaScript（可放在wwwroot/js文件夹中）：

window.createStandardTemplate = function(contentHtml) {
    const template = document.createElement('template');
    template.innerHTML = contentHtml;
    template.setAttribute('data-markdown', 'true');
    template.style.display = 'none !important';
    // 将template添加到DOM的目标位置，比如组件容器内
    document.getElementById('your-component-container').appendChild(template);
};

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