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

【问题标题】：How would I import a custom web component asynchronously?如何异步导入自定义 Web 组件？
【发布时间】：2020-05-07 00:05:54
【问题描述】：

我已将我的自定义输入元素（用于表单的现代文本输入）制作成一个 Web 组件。我为实现它而制作的 .js 文件包含三个部分。

HTML 模板：

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);

问题： 我担心使用<script src="./module-name"> 会效率低下 或可能会导致错误，因为它会在页面的其余部分加载后同步加载。因此，我想知道是否有一种更简洁/更专业的方法来异步导入 Web 组件，而无需将整个模块粘贴到这样的函数中：

export function textInput { // insert entire modules contents here }

因为我需要模块的所有三个部分才能让 Web 组件工作，所以我不能只导出 Web 组件类。

【问题讨论】：

它会导致什么错误？不管定义是先运行还是最后运行，元素总是会升级。异步可以通过async 实现，参见MDN <script> Documentation
感谢您的评论。我的网站还有 10 个其他导入的文件。其中一些在功能上重叠，例如用于同一页面的两个“模块”（我拆分了一个长脚本），所以我想避免变量和元素之间任何可能的干扰，而不必自己检查每个变量，就像变量的功能一样范围。 “define 先运行还是最后运行都没有关系，元素总是会升级。异步可以通过 async 实现。”我认为这回答了我剩下的问题。

标签： javascript asynchronous web-component es6-modules

【解决方案1】：

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

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

您可以查看here或here

在哪里说，例如：

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

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

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

【讨论】：