Blazor应用程序不会向razor类库组件元素添加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>

@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>

@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
    }
}

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);
};