javascript - 如何将 HTML Web 组件与 HTML 文件结合起来？innerHTML = foo("myfile.html")

Question

使用 HTML Web 组件，我知道我可以设置他们的 HTML 代码：

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

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

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

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

如何才能做到这一点？

Answer 1

你可以用fetch().

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

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

2 Web Components的实现示例：

• 一个最小的async/await例子，
• 一个更完整的Promise。