除了“dom-module”之外，有没有办法控制 CustomElementRegistry 和名称答案

【问题标题】：Is there a way to control CustomElementRegistry and name other than "dom-module"除了“dom-module”之外，有没有办法控制 CustomElementRegistry 和名称
【发布时间】：2019-09-10 15:51:02
【问题描述】：

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

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

未捕获的 DOMException：无法在“CustomElementRegistry”上执行“定义”：名称“dom-module”已用于此注册表

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

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

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

【问题讨论】：

提供您的代码以获取更多社区意见
如果您将所有组件命名为“dom-module”，那么您就有问题了。如果没有，请发布您的代码，以便我们弄清楚。
@walker 我也遇到过同样的情况，检查 package.json 中的版本，一个或多个元素是旧版本。全部更新。应该解决了。
这可能是一些依赖问题。尝试清除 package.json 并再次安装所有依赖项以获取最新版本。
提示：使用聚合物服务确保一切不冲突+不要使用多个符号链接

标签： polymer web-component lit-element

【解决方案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，但重要的是消费者可以选择如何处理注册

干杯，?追逐

【讨论】：

感谢您的回答。我喜欢你的 registerComponents 想法，在其中传递一个组件对象，我想出了一个想法，比如将一个对象作为 { class: ShopperCart, componentName: "shoping-cart"} 传递。

【解决方案2】：

关于 API，没有！

只能读取 customElementRegistry，但在注册后没有提供更新或操作它的函数。这样做也是没有意义的。

顺便说一句，你不应该使用 dom-module，因为它是保留的。

【讨论】：

感谢您的回答。使用 LitElement 创建的组件正在使用 dom 模块。使用一个组件时没有问题。但是当使用 2 个单独的组件时，会出现此错误。

【解决方案3】：

一旦注册了组件。您不能覆盖或重新注册具有相同名称的元素。相反，您可以使用同一组件的多个实例或扩展现有的实例。

【讨论】：