как избежать переопределения веб-компонента в lit-element?

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

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

Подобный общедоступный веб-компонент я определил в MyPublic.js. И затем, когда мне нужно будет использовать его в FooComponent.js, я импортирую MyPublic.js, когда мне нужно будет использовать его в BarComponent.js, я также импортирую MyPublic.js. Это вызовет переопределение для my-public.

Как этого избежать?

Просто импортировать все веб-компоненты в index.js, а потом больше не импортировать?


web-component polymer lit-element
person zzzgoo    schedule 17.08.2019    source источник
comment
Последнее, что я слышал import, должно загружать каждый файл только один раз.   -  person Intervalia    schedule 17.08.2019

Ответы (1)


arrow_upward
1
arrow_downward

Нет, это не приведет к переопределению вашего элемента, точно так же, как ваш окончательный (живой) код JavaScript в браузере не содержит дюжины копий библиотеки LitElement или Polymer.

Среда выполнения браузера устраняет дублирование импорта. Это означает, что глобальные переменные, определенные в модуле, также существуют в памяти только один раз, и, как правило, свободный код в модулях выполняется только один раз.

Дополнительную информацию об этом можно найти в спецификации. Но по сути:

Эта операция [импорта] должна быть идемпотентной, если она завершается нормально. Каждый раз, когда он вызывается с конкретным referencingScriptOrModule, парой спецификаторов в качестве аргументов он должен возвращать один и тот же экземпляр Module Record.

person crazypeter    schedule 20.08.2019