Blazor应用中如何动态按需加载Web Component自定义元素的JS？

我们有一批基于**自定义元素（Custom Elements）**开发的JavaScript Web组件，在纯HTML环境中可直接通过以下代码使用：

<my-custom-element></my-custom-element>

这些组件已被封装到Razor类库（Razor Class Library）的Blazor包装控件中。当前我们的使用流程是：

1. 在Blazor应用的index.html中预先加载对应Web组件的JS文件：

<script src="_content/MyRazorClassLibrary/components/my-custom-element.js"></script>

2. 之后就能在Blazor页面/组件中直接引用封装好的Blazor控件：

<MyCustomElement></MyCustomElement>

这套方案运行正常，但我们希望优化资源加载策略——不想在Blazor应用启动时就加载所有组件的JS文件，而是按需动态加载。

核心疑问 #

Blazor应用加载完成后，能否通过**JavaScript隔离（JavaScript Isolation）**导入ES6模块，或通过其他技术手段，让Blazor的HTML解析器识别后续动态加载的自定义元素？

当前探索结果 #

目前我们尝试后发现似乎无法实现上述需求，仅能采用以下两种备选方案：

• 在index.html中预先加载所有组件的JS文件（即便部分组件不会被实际使用）
• 借助JavaScript隔离机制，调用隔离模块中的JS函数，通过DOM元素（如div）手动构造Web组件（不再使用HTML自定义元素的写法）

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