如何使用DynamicComponent加载带隔离CSS的外部RCL组件

Blazor的CSS隔离机制是编译阶段生成的：组件会被自动添加唯一的作用域属性（如b-xxxxxx），对应的.razor.css文件会被编译成带该属性选择器的样式，最终打包到RCL的静态资源中。但动态加载外部RCL DLL时，宿主应用不会自动识别并加载这些隔离样式，也不会为动态组件注入作用域属性，导致CSS失效。

以下是几种可行的解决方式：

方法一：手动加载隔离CSS并注入作用域属性 #

1. 提取RCL的隔离CSS文件：
   找到RCL编译输出目录（如bin/Debug/net8.0/wwwroot）下的[AssemblyName].styles.css文件（这里是ExternalRCL.styles.css），将其复制到宿主应用的wwwroot目录。

2. 在宿主应用中引用该CSS：
   在宿主的_Host.cshtml（Server模式）或index.html（WebAssembly模式）中添加引用：

   <link href="ExternalRCL.styles.css" rel="stylesheet" />
   

3. 为动态组件添加作用域属性：
   修改Index.razor代码，通过反射获取组件的CSS作用域标识符，并手动添加到组件容器上：

   <div @attributes="componentScopeAttributes">
       <DynamicComponent Type="@componentType" />
   </div>
   
   @code {
       Type? componentType;
       Dictionary<string, object>? componentScopeAttributes;
   
       protected override void OnInitialized()
       {
           var assembly = Assembly.LoadFile(@"path_To_dll\ExternalRCL.dll");
           componentType = assembly.GetType("ExternalRCL.ExternalComponent");
           
           // 获取组件的CSS隔离作用域属性
           var metadataAttr = componentType?.GetCustomAttribute<ComponentMetadataAttribute>();
           if (!string.IsNullOrEmpty(metadataAttr?.CssScope))
           {
               componentScopeAttributes = new Dictionary<string, object>
               {
                   { metadataAttr.CssScope, string.Empty }
               };
           }
       }
   }
   

方法二：禁用CSS隔离，改用全局样式 #

如果不需要隔离特性，可以直接放弃.razor.css：

1. 删除RCL中的ExternalComponent.razor.css文件，将样式代码迁移到RCL的全局CSS文件（如wwwroot/css/global.css）。
2. 将该全局CSS文件复制到宿主应用的wwwroot目录，并在宿主入口文件中引用。

方法三：通过嵌入式资源加载RCL静态资源（.NET 6+） #

此方法无需手动复制文件，直接从RCL DLL中读取静态资源：

1. 配置RCL嵌入静态资源：
   修改RCL的项目文件，确保静态资源被嵌入到DLL中：

   <Project Sdk="Microsoft.NET.Sdk.Razor">
       <PropertyGroup>
           <TargetFramework>net8.0</TargetFramework>
       </PropertyGroup>
       <ItemGroup>
           <EmbeddedResource Include="wwwroot/**" />
       </ItemGroup>
   </Project>
   

2. 在宿主应用中配置嵌入式资源访问：
   在Program.cs中添加代码，注册RCL的嵌入式文件提供器：

   var externalAssembly = Assembly.LoadFile(@"path_To_dll\ExternalRCL.dll");
   app.UseStaticFiles(new StaticFileOptions
   {
       FileProvider = new EmbeddedFileProvider(externalAssembly, "ExternalRCL.wwwroot"),
       RequestPath = "/_content/ExternalRCL"
   });
   

3. 引用RCL的隔离CSS：
   在宿主入口文件中添加引用：

   <link href="_content/ExternalRCL/ExternalRCL.styles.css" rel="stylesheet" />
   

4. 添加组件作用域属性：
   同样需要参考方法一的代码，为动态组件注入CSS作用域属性。

额外注意事项 #

• 对于background.png这类静态资源，需确保其被设置为EmbeddedResource（在RCL项目文件中配置），并通过宿主的EmbeddedFileProvider访问。
• 动态加载DLL时，注意路径的正确性，建议使用绝对路径或确保DLL在宿主应用的可访问目录下。

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