重用lit-element中的组件

Question

任何人都可以指向任何关于如何在lit-element中重用代码的文档。

现在的问题是，如果我声明了一个元素，在我的例子中是一个close-button，并且我想通过将它导入2个或更多的lit- element来重用它，那么浏览器中就会出现关于close-button被多次声明的错误。

可以理解，但如何重用组件，我当然可以将按钮移动到单独的文件并将其添加到文档中，但其他组件将依赖于该文件才能工作。

有什么建议吗

Answer 1

如果close-button通过调用customElements.define('close-button', ...)进行自我注册，那么您应该能够导入它的定义模块，并且不会因为JS的模块缓存行为而出现任何错误。

您必须有多个customElements.define('close-button', ...)调用，所以我要确保: 1)它是自注册的，并且您不会在使用它的每个组件中再次注册它；2)您使用的是标准JS模块。

Answer 2

经过更多的研究，我得出结论，共享HTML模板可能是实现这一点的方法。