如何异步导入自定义 Web 组件？

Question

我已将自定义输入元素（表单的新式文本输入）设置为 Web 组件。我为实现它而制作的.js文件有三个部分。模板：const textInputTemplate = document.createElement('text-input-template');textInputTemplate.innerHTML =`<div class="text-input-container">    <!--Irrelevant--></div>`;元素的类声明：class textInput extends HTMLElement {    static get observedAttributes() {        return ['readonly'];    }    constructor () {        super();        // Shadow root    } // End of constructor()    connectedCallback () {        // Custom attributes    } // End of connectedCallback()    disconnectedCallback () {        // Remove event listeners    } // End of disconnectedCallback()    attributeChangedCallback(attribute, oldValue, newValue) {        // Updatable attributes: readonly    } // End of attributeChangedCallback()   }最后，将自定义元素与标记名称关联的方法：window.customElements.define('text-input', textInput);问题：我担心使用效率低下或可能导致错误，因为它在页面的其余部分加载后同步加载。因此，我想知道是否有一种更清晰/更专业的方法来异步导入Web组件，而无需将整个模块粘贴到这样的函数中：<script src="./module-name">export function textInput { // insert entire modules contents here }因为我需要模块的所有三个部分才能使 Web 组件正常工作，所以我不能只导出 Web 组件类。

Answer 1

我知道这是一个老问题，但尚未解决，我遇到了同样的问题，并且就像以这种方式加载脚本时包含一样简单：async

<script src="./module-name" async>

您可以在此处或此处查看

例如，例如：

如果存在，则指定脚本将在可用时立即异步执行。

如果 async 属性存在，则经典脚本将与解析并行获取，并在可用时立即进行评估。

因此，您不必担心锁定页面的其余部分，因为每个scrpit都将尽快并行加载。