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

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我建议，但重要的是消费者可以选择如何处理注册

干杯，👋追