时间戳

首页 > 解决方案 > 如何使用外部 HTML 文件制作 Web 组件？

javascript - 如何使用外部 HTML 文件制作 Web 组件？

问题描述

我希望我的 Web 组件的 HTML 代码位于它自己的文件中，因此我会将它导入到我的 Web 组件的 JS 中。我知道我可以使用<link>标签来做到这一点，但现在已经过时了。如何在将 HTML 放在自己的文件中的同时制作 Web 组件，类似于 Angular 组件？

目前，我使用fetch它来获取它，但这需要我将其转换为字符串，然后将其附加到 DOM，并且在拥有多个组件时并不愉快。它现在有效，但似乎不正确。

我读过，但忘了在哪里，我可以做这样的事情：

import * as template from "my-component.html";

我试过了，但我收到了这个错误：

加载模块脚本失败：服务器以“text/html”的非 JavaScript MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。

有什么正常的方法可以导入 HTML 文件吗？

标签： javascripthtmlweb-componentes6-moduleshtml-imports

解决方案

推荐阅读