我们可以在常规非 Blazor HTML 页面中将 Blazor 组件用作 Web 组件吗？

Question

我们能否将 Blazor 组件渲染为独立的 DOM 片段，或者以其他方式将其用作普通 HTML/JS 页面中的标准 Web 组件？

从 Blazor 架构的角度来看，这可能是一个天真的问题。到目前为止，我还不是 Blazor 专家，但我认为它对于遗留 Web 应用程序的增量“棕地”现代化来说可能是一种有用的技术。我很惊讶这似乎没有得到官方支持。

为了说明这一点，请考虑这个简单的 Web 组件示例，它呈现一个自定义元素<date-info>：

// define a custom web component
customElements.define("date-info", class DateInfo extends HTMLElement {
  constructor() {
    super();
    // create an "open" (vs "closed") shadow DOM, 
    // i.e., accessible to the outside JavaScript
    this.attachShadow({ mode: "open" });
  }

  async connectedCallback() {
    console.log(`${this.constructor.name}.${this.connectedCallback.name} called`);

    // get the content from the server, 
    // this could be a Blazor component markup
    try {
      const response = await fetch("https://worldtimeapi.org/api/ip");
      const data = await response.json();
      const content = new Date(data.utc_datetime).toString();
      this.shadowRoot.innerHTML = `<span>${content}</span>`;
    }
    catch(e) {
      console.error(e);
      const info = document.createTextNode(e.message); 
      this.shadowRoot.appendChild(info);
    }
  }
});

<!-- use the web component --> 
<p>Current time: <date-info/></p>

现在，我不想获取 ，而是https://worldtimeapi.org/api/ip想获取并渲染 Blazor/Server 组件的分离标记，例如：

@* this is a Blazor component *@
<p>@(DateTime.Now)</p>

此外，我希望此标记保持功能性和动态性，即此 Blazor 组件的客户端 DOM 事件和服务器端更新通过包装 Web 组件的生命周期进一步双向传播。

当然可以将其设为 Blazor@page并将其加载到 中iframe，但我更希望将其呈现为外部页面 DOM 的一部分。

到目前为止，我遇到过这个：

• 显然，这并不是 2018 年 Blazor 的设计目标之一： https://github.com/dotnet/aspnetcore/issues/16033。

• 后来 Steve Sanderson 创建了一个（非官方）库来单独测试 Blazor 组件，理论上可以使用该库来获取独立的 Blazor 组件标记： https: //stackoverflow.com/a/60457390/1768303。

  到目前为止，这是解决这个问题的最佳方法吗？

Answer 1

MS 已解决了此限制，但该解决方案需要 .Net 6。

https://github.com/aspnet/AspLabs/tree/main/src/BlazorCustomElements

这是由史蒂夫·桑德森本人完成的。