如何将 Blazor Wasm 应用程序放入 HTML 自定义元素中？

Question

我想在这里做一些炼金术：我有一个 Blazor Wasm 应用程序，我尝试（出于某些原因）封装到 HTML 自定义元素 .

到目前为止，我了解到脚本 _framework/blazor.webassembly.js 是应用程序的 bootstrap。

但是，如果我将该脚本放入我的 HTML 自定义元素 的影子根目录中，该脚本似乎已执行，到达断点，但与Blazor 应用程序发生：dotnet.wasm 未加载，没有消息，没有显示错误。

所以问题是：是否有人试图将 Blazor Wasm 应用程序封装到 HTML 自定义元素 中？可以的话怎么办？

编辑：

这是我目前得到的结果 DOM：

<html lang="en">

<head>
  <!-- Usual things omitted -->
</head>

<body>

  <my-custom-element>
    #shadowRoot
      <div id="app"></div>
      <script src="_framework/blazor.webassembly.js" type="text/javascript"></script>
  </my-custom-element>

  <!-- The shadowRoot and its content is generated by the custom element declared in this script -->
  <script src="importMyCustomElement.js" type="text/javascript"></script>

</body>

</html>

Answer 1

我也在调查这个。看来你不见了 <div id="app"> 元素。请注意 id="app" 这是 Blazor 默认查找的内容（请参阅 Blazor Webassembly 应用程序的 Program.cs）。

Answer 2

有点晚了，但目前这是可能的。 Blazor 现在支持注册可以由 Javascript 实例化的组件。还有实验性支持将它们注册为自定义元素。

这是它最近的开发博客 https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-6-rc-1/#blazor-custom-elements

您可以通过安装预发布的 nuget 包开始

Microsoft.AspNetCore.Components.CustomElements

那么您可以这样做而不是添加根组件。

// WASM sample
builder.RootComponents.RegisterAsCustomElement<Counter>("my-blazor-counter");

// Server-side sample
builder.Services.AddServerSideBlazor(options =>
{
    options.RootComponents.RegisterAsCustomElement<Counter>("my-blazor-counter");
});

在您的索引中添加以下脚本

<script src="_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

有了它，您现在可以将这些组件用作自定义元素，它们既可以在另一个 SPA 框架中使用，也可以直接使用 html。

// Plain usage
<my-blazor-counter increment="1"></my-blazor-counter>

// React
let count = 1;
<my-blazor-counter increment={count}></my-blazor-counter>

这适用于服务器端和 webassembly。它也可以是一种使用服务器端 Blazor 创建实时 Web 组件（例如聊天框）而无需处理 SignalR 的巧妙方法。

如何将 Blazor Wasm 应用程序放入 HTML 自定义元素中？

How to put a Blazor Wasm application into an HTML Custom Element?

blazor-webassembly