模板：命名空间自定义元素的名称以避免冲突

Question

我们的平台建立在带有 Web 组件的微前端架构上。我们正在为其中一些使用 Stencil，这意味着我们在一个网页中有多个 Stencil 应用程序。此外，我们还有一个 UI 库，也是用 Stencil 构建的，我们希望在这些微前端组件中使用它。

我们希望使用 Stencil UI 库作为 Stencil 微前端组件的构建时依赖项。但由于标签名称冲突，目前这是不可能的：

理论上，两个微前端可以提供两个不同版本的 UI 库。但是，在运行时，它们会发生冲突，因为它们都试图用customElements.define. 当然，这不会发生，因为 Stencil 在注册新名称之前检查现有名称 - 但结果同样糟糕：第一个加载的组件总是获胜，如果它是旧版本或具有不同的 API，其他组件会打破。

一个解决方案是在构建或运行时命名空间/前缀标记名称，但网络标准中没有任何内容（尚未）。虽然namespaceStencil 中有一个配置选项，但这似乎并不能解决此类问题。

使用纯 ES6，我们至少可以执行以下操作（即使用动态标签名称注册自定义元素）：

export class InnerComponent extends HTMLElement
{
    static register(prefix) {
        customElements.define(`my-${prefix}-inner-component`, InnerComponent)
    }

    constructor() {
        super()
        this.shadow = this.attachShadow({ mode: "open" })
    }

    connectedCallback() {
        this.shadow.innerHTML = `<span>this is some UI component</span>`
    }
}

而且我确信我们可以在 Webpack 等中使用某种构建时解决方案来实现相同的目标。

但是 Stencil 是否有类似的可能？或者还有什么办法可以解决这个问题？

Answer 1

我们面临着类似的问题。我们的解决方案是避免捆绑依赖项并将它们部署为单独的库。所以如果A和B都依赖于C，那么A和B都没有任何C组件，C作为自己的脚本资源包含在前端中。