有没有办法控制 CustomElementRegistry 和 "dom-module" 以外的名称

Question

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

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

未捕获的 DOMException：无法在 'CustomElementRegistry' 上执行 'define'：名称 "dom-module" 已用于此注册表

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

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

更新：我觉得我问的不够清楚所以我更新了问题。

Answer 1

问候 API，不！

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

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

Answer 2

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

Answer 3

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

在我的组件库中，我提供了一个名为 registerComponents

的简单函数

function dashify(camel) {
  return camel.replace(/([a-zA-Z])(?=[A-Z])/g, '-').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，但重要的是消费者可以选择如何处理注册

干杯，追

有没有办法控制 CustomElementRegistry 和 "dom-module" 以外的名称

Is there a way to control CustomElementRegistry and name other than "dom-module"

web-component

polymer

lit-element