Blazor应用程序不会向razor类库组件元素添加css隔离范围标识符

基础概念

Blazor 是一个用于构建交互式 Web UI 的框架，使用 C# 和 HTML 来创建丰富的客户端 Web 应用程序。Razor 类库（Razor Class Library, RCL）是一种将 Razor 组件封装成可重用的库的方式。

CSS 隔离范围标识符（CSS Isolation Scope Identifier）用于确保组件的样式不会影响到其他组件或全局样式。

类型

Blazor 中的 CSS 隔离主要有两种方式：

Scoped CSS：样式仅应用于当前组件及其子组件。
Shadow DOM：通过 Shadow DOM 技术实现更严格的样式隔离。

应用场景

当你在开发 Blazor 应用程序时，特别是当你需要创建可重用的组件库时，CSS 隔离是非常重要的。它可以防止组件之间的样式冲突，确保每个组件的样式独立。

问题原因

Blazor 应用程序不会向 Razor 类库组件元素添加 CSS 隔离范围标识符的原因可能有以下几种：

配置问题：可能是因为项目配置中没有正确启用 CSS 隔离。
版本问题：使用的 Blazor 版本可能不支持某些 CSS 隔离特性。
代码问题：可能在编写组件时没有正确使用 CSS 隔离的语法。

解决方法

1. 检查项目配置

确保在 *.csproj 文件中启用了 CSS 隔离。例如：

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <RazorLangVersion>6.0</RazorLangVersion>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.0" />
  </ItemGroup>

  <ItemGroup>
    <None Update="wwwroot/css/site.css">
      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
    </None>
  </ItemGroup>

</Project>

2. 使用 Scoped CSS

在组件中使用 scoped 属性来确保样式仅应用于当前组件。例如：

@page "/scoped-component"
@inject IJSRuntime JSRuntime

<h3>Scoped Component</h3>

<div class="scoped-div">
    This is a scoped component.
</div>

<style scoped>
.scoped-div {
    background-color: lightblue;
    padding: 10px;
    border: 1px solid black;
}
</style>

3. 使用 Shadow DOM

如果需要更严格的样式隔离，可以使用 Shadow DOM。Blazor 支持通过 @implements IJSObjectReference 和 IJSRuntime 来与 JavaScript 交互，从而使用 Shadow DOM。

@implements IJSObjectReference

<h3>Shadow DOM Component</h3>

<div ref="shadowHost">
    This is a component using Shadow DOM.
</div>

@code {
    private ElementReference shadowHost;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var shadow = await JSRuntime.InvokeAsync<ShadowRoot>("attachShadow", new object[] { new DotNetObjectReference(this), true });
            await JSRuntime.InvokeVoidAsync("createShadowDOM", shadowHost, shadow);
        }
    }

    [JSInvokable]
    public void UpdateMessage(string message)
    {
        // Handle messages from JavaScript
    }
}

在 JavaScript 中：

window.createShadowDOM = function (hostElement, shadowRoot) {
    const div = document.createElement('div');
    div.innerHTML = `
        <style>
            .shadow-div {
                background-color: lightgreen;
                padding: 10px;
                border: 1px solid black;
            }
        </style>
        <div class="shadow-div">
            This is a component using Shadow DOM.
        </div>
    `;
    shadowRoot.appendChild(div);
};