能否在非Blazor普通HTML页面中将Blazor组件作为Web Component使用？

问题解答 #

可以实现你需要的需求，目前有成熟的方案不需要依赖iframe，完全支持Blazor组件和外层原生页面的双向交互：

优先推荐官方方案

.NET 6及更高版本已经官方提供了Microsoft.AspNetCore.Components.CustomElements NuGet包，专门用来把Blazor组件封装为符合W3C标准的Web Component，完美适配遗留系统增量改造的场景。
使用步骤非常简单：

1. 你示例中用来显示当前时间的Blazor组件代码可以直接复用：

@* CurrentTime.razor 组件代码 *@
<p>@DateTime.Now</p>

2. 给你的Blazor项目安装对应版本的Microsoft.AspNetCore.Components.CustomElements包
3. 在项目的Program.cs文件中注册需要导出为自定义元素的Blazor组件，示例如下：

// 将CurrentTime组件注册为自定义元素标签<blazor-current-time>
builder.RootComponents.RegisterCustomElement<CurrentTime>("blazor-current-time");

4. 将编译后的Blazor JS运行时引入到你的原生HTML页面中，就可以像使用普通Web Component一样调用Blazor组件，和你示例中的<date-info>用法完全一致：

<p>当前时间：<blazor-current-time></blazor-current-time></p>

这个方案原生支持你需要的所有特性：

• 组件渲染结果直接作为外层页面DOM的一部分，不需要iframe隔离
• Blazor的服务端交互、客户端事件都会正常工作，和在纯Blazor项目中的表现完全一致
• 支持组件参数、自定义事件和外层原生JS的双向绑定，Web Component的生命周期会自动和Blazor组件的生命周期对齐，不需要额外做适配

旧版本.NET的替代方案

如果你使用的是.NET 5及更早的版本，没有官方自定义元素支持，那Steve Sanderson推出的组件测试工具库确实是当时相对成熟的方案，可以用来提取独立的Blazor组件标记并绑定交互逻辑。但如果你的项目可以升级.NET版本，优先选择官方自定义元素方案，兼容性、维护性都更有保障。

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