Blazor Web App(.NET 9)中JS append添加标签丢失CSS样式问题

项目为Blazor Web App（.NET 9.0），相关代码如下：

Razor代码 #

<div>
        <ul class="nav nav-tabs marginBottom" id="myTab">
            <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#profile">
                    测试页1
                    <span class="closeTabBtn">×</span>
                </a>
            </li>
        </ul>
    </div>
    <div>
        <div class="operationDiv">
            <button type="submit" class="btn" id="composeButton">Compose</button>
        </div>
    </div>

CSS代码 #

.closeTabBtn{
    background-color:gray;
    color:black;
}

JavaScript代码 #

$('#composeButton').click(function (e) {

    e.preventDefault();

    $('.nav-tabs').append('<li class="nav-item"><a class="nav-link" href="#1">测试页<span class="closeTabBtn">×</span></a></li>');

});

为何通过append方法添加的标签会丢失CSS样式？

核心原因 #

Blazor默认开启CSS隔离机制，会自动为组件内的CSS类生成带唯一作用域后缀的类名（例如.closeTabBtn[b-abc123]），确保样式只作用于当前组件初始化时渲染的元素。而通过jQuery动态添加的DOM元素，不会被Blazor的CSS隔离处理，无法匹配到带作用域的CSS规则，导致样式失效。

解决方法 #

1. 用::deep穿透CSS隔离

在组件的.razor.css文件中，给目标样式添加::deep伪类，让样式作用于组件内所有子元素（包括动态生成的）：

::deep .closeTabBtn{
    background-color:gray;
    color:black;
}

2. 将CSS移至全局样式文件

把.closeTabBtn的样式放到全局样式文件（如wwwroot/css/site.css）中，全局样式不受Blazor的CSS隔离限制，会作用于所有DOM元素。

3. 改用Blazor原生方式动态渲染标签

既然是Blazor项目，推荐用Blazor的状态管理+循环渲染来替代jQuery操作DOM，完全适配Blazor的渲染机制：

首先在Razor组件中定义标签列表和添加方法：

@code {
    private List<TabModel> Tabs = new()
    {
        new() { Title = "Home", IsActive = true },
        new() { Title = "测试页1" }
    };

    private void AddNewTab() => Tabs.Add(new() { Title = "测试页" });

    private class TabModel
    {
        public string Title { get; set; }
        public bool IsActive { get; set; } = false;
    }
}

然后用Blazor循环渲染标签：

<div>
    <ul class="nav nav-tabs marginBottom" id="myTab">
        @foreach (var tab in Tabs)
        {
            <li class="nav-item">
                <a class="nav-link @(tab.IsActive ? "active" : "")" href="#">
                    @tab.Title
                    @if (tab.Title != "Home")
                    {
                        <span class="closeTabBtn">×</span>
                    }
                </a>
            </li>
        }
    </ul>
</div>
<div>
    <div class="operationDiv">
        <button type="button" class="btn" @onclick="AddNewTab">Compose</button>
    </div>
</div>

这种方式下，动态添加的元素会被Blazor正常处理，CSS隔离也能完美生效。

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