Polymer 如何避免在lit元素中重新定义web组件？ 从'lit element'导入{LitElement，html}； 类MyPublic扩展了LitElement{ render（）{ 返回html`

段落

`; } } 自定义元素。定义（'my-public'，MyPublic）； 我在

MyPublic.js

中定义了一个公共web组件。然后当我需要在

FooComponent.js

中使用它时，我将导入

MyPublic.js

，当我需要在

BarComponent.js

中使用它时，我还将导入

MyPublic.js

。这将导致重新定义

my public

如何避免呢

---

只需导入

index.js

中的所有web组件，然后不再导入它？

不，这不会导致重新定义元素，就像浏览器中的最终（实时）JavaScript代码不包含十几个LitElement或Polymer库副本一样

导入由浏览器的运行时进行重复数据消除。这意味着在一个模块中定义的全局变量在内存中也只存在一次，更一般地说，模块中的自由代码只执行一次

你可以阅读更多关于这方面的内容。但本质上：

如果此[import]操作正常完成，则它必须是幂等的。每次使用特定引用ScriptorModule、说明符对作为参数调用它时，它必须返回相同的模块记录实例

---

我最近听到的

import

应该只加载每个文件一次。

import { LitElement, html } from 'lit-element';

class MyPublic extends LitElement {
  render(){
    return html`
        <p>A paragraph</p>
    `;
  }
}
customElements.define('my-public', MyPublic);