如何将 HTML 网络组件与 HTML 文件合并？内部HTML = foo("myfile.html")

How to combine HTML web component with HTML file? innerHTML = foo("myfile.html")

使用 HTML 网络组件，我知道我可以设置它们的 HTML 代码：

this.innerHTML = `<h1></h1>`;

我遇到的问题是我错过了 Emmet 缩写的便利，如果我制作了很多组件，这会减慢我的速度。

我需要一个函数，它 returns 将 HTML 文件作为一个字符串，这样我就可以使它等于内部 HTML，如下所示：

this.innerHTML = getHTML("myfile.hmtl");

如何做到这一点？

您可以使用 fetch()。

请注意，这是一个异步函数，因此您应该使用 async/await 或 Promise()。

this.innerHTML = await fetch( 'myfile.html' ).then( s => s.text() )

2 个 Web 组件的实现示例：

  • 一个 minimal example 和 async/await,
  • 更多 与 Promise。