除了“dom-module”之外，还有其他方法可以控制 CustomElementRegistry 和名称吗

Question

我们正在使用 LitElement 构建自定义组件（非公开）。我们将其称为 CompA 和 CompB。我们正在使用 CDN 发布包。

我们通过类型模块的 Script 标签在 HTML 中使用它。当每个组件是页面上唯一的组件时，它都可以正常工作。当我们在同一页面上导入 CompA 和 CompB 时，我们遇到了问题。

未捕获的 DOMException：无法在“CustomElementRegistry”上执行“define”：名称“dom-module”已与此注册表一起使用

我知道问题的产生是因为 CompA 和 CompB 使用了类似的 UI 组件集。可能是纸张输入、纸张按钮等。

在使用 LitElement 构建组件时，有没有办法通过更好地控制 CustomElementRegistry 的命名和“dom-module”以外的名称来避免此错误。

更新：我认为我提问时不够清楚，所以我更新了问题。

Answer 1

这个问题是组件库将组件注册留给消费应用程序的一个很好的理由

在我的组件库中，我提供了一个简单的函数，称为registerComponents

function dashify(camel) {
  return camel.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase()
}

export function registerComponents(components) {
  for (const componentName of Object.keys(components))
    customElements.define(dashify(componentName), components[componentName])
}

这使得消费者可以很容易地注册组件

该函数只是将组件名称从驼峰式大小写转换为破折号名称（例如ShopperCart变为shopper-cart）

我的组件库提供了一个名为 的便捷模块register-all.js，它执行所有注册，类似于消费者手动执行此操作的方式

import {ShopperCart} from "./components/shopper-cart.js"
import {ShopperButton} from "./components/shopper-button.js"
import {ShopperProduct} from "./components/shopper-product.js"
import {ShopperCollection} from "./components/shopper-collection.js"

import {registerComponents} from "./toolbox/register-components.js"

registerComponents({
  ShopperCart,
  ShopperCollection,
  ShopperButton,
  ShopperProduct
})

通过这种方法，重命名组件非常容易

registerComponents({
  MyCart: ShopperCart
})

当然，在这种情况下，消费者可以选择简单地导入方便的register-all.js标准名称

import "shopper/dist/register-all.js"

因此需要明确的是，在每个组件模块中使用调用是一个不好的模式customElements.define，因为我们希望为消费者提供一定的灵活性

您不必使用或提供registerComponents我建议的便利，但重要的是消费者可以选择如何处理注册

欢呼，追逐