如何异步导入自定义 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&nbsp;src="./module-name"&nbsp;async>您可以在此处或此处查看例如，例如：如果存在，则指定脚本将在可用时立即异步执行。如果 async 属性存在，则经典脚本将与解析并行获取，并在可用时立即进行评估。因此，您不必担心锁定页面的其余部分，因为每个scrpit都将尽快并行加载。