如何将Blazor Wasm应用封装到HTML自定义元素中？

我之前刚好折腾过把Blazor WASM塞进自定义元素的Shadow DOM里，确实会遇到你说的这种脚本执行了但dotnet.wasm没加载的情况——本质是Blazor默认的启动逻辑是基于全局文档上下文的，Shadow Root的隔离特性打破了这个逻辑。下面是我亲测有效的解决方案：

核心问题分析 #

blazor.webassembly.js默认会自动启动，它会在全局document里找挂载点，并且从当前页面的根路径加载dotnet.wasm等资源。但Shadow Root是独立的DOM上下文，脚本虽然能执行，但Blazor找不到正确的挂载容器，也没法正确解析资源路径，所以就卡在了启动前的步骤，还不会报错（因为没有触发到它的错误检测逻辑）。

具体解决步骤 #

1. 禁用Blazor的自动启动 #

首先修改Shadow Root里的Blazor脚本，添加autostart="false"属性，阻止它自动启动：

<script src="_framework/blazor.webassembly.js" autostart="false" type="text/javascript"></script>

2. 手动初始化Blazor到Shadow Root容器 #

在你的自定义元素脚本（importMyCustomElement.js）里，要等Blazor脚本加载完成后，手动调用Blazor.start()，并明确指定Shadow Root里的挂载容器和资源基础路径：

class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: 'open' });
    // 注入Blazor所需的DOM结构、样式和脚本
    shadowRoot.innerHTML = `
      <div id="app"></div>
      <link href="css/app.css" rel="stylesheet" />
      <script src="_framework/blazor.webassembly.js" autostart="false"></script>
    `;
  }

  connectedCallback() {
    // 轮询等待Blazor全局对象加载完成
    const blazorLoadChecker = setInterval(() => {
      if (window.Blazor) {
        clearInterval(blazorLoadChecker);
        // 手动启动Blazor，指定Shadow Root内的挂载容器
        Blazor.start({
          rootComponents: [
            {
              // 这里对应Blazor项目中Program.cs里注册的根组件选择器
              component: '#app',
              // 传入Shadow Root里的实际DOM元素
              selector: this.shadowRoot.getElementById('app')
            }
          ],
          // 设置Blazor资源的基础路径，根据你的部署路径调整，根目录就用'/'
          baseUrl: '/'
        });
      }
    }, 100);
  }
}

customElements.define('my-custom-element', MyCustomElement);

3. 处理样式隔离问题 #

因为Shadow DOM的样式隔离特性，Blazor的全局样式不会自动渗透进去，所以需要把你的Blazor应用样式（比如css/app.css）也注入到Shadow Root里，就像上面代码里的<link>标签那样。如果有动态样式或者第三方组件样式，可能还需要用CSS变量或者:host选择器来适配。

4. 路由适配（可选） #

如果你的Blazor应用使用了路由，需要注意Shadow DOM不会影响浏览器的全局路由，但Blazor的内部路由逻辑是正常的。如果需要让自定义元素和外部路由联动，可能还要额外监听popstate事件并同步到Blazor路由。

测试验证 #

做完上面的修改后，重新部署应用，应该能看到Blazor正常加载dotnet.wasm，并把组件渲染到Shadow Root的#app容器里了。如果还是有问题，可以打开浏览器控制台的网络面板，检查dotnet.wasm等资源的请求路径是否正确，或者在Blazor.start()里添加logLevel: 'debug'来开启调试日志排查问题。

内容的提问来源于stack exchange，提问作者Loïc Morvan