Web 组件，如何将 HTML 与代码分离

Question

我想知道是否可以（我使用 ES6 和 Typescript）将我的 HTML 代码与我的组件分开，即将 HTML 代码包含到另一个文件的变量中。

目前我们正在这样的结构中编写所有 HTML：

let html = `<h1>Hello</h1> world!`

当您有大量 HTML 时，这显然不太酷。

有没有办法将我的 HTML 与 Javascript 组件分开，这样我就可以这样做：

let html = include('index.html');

Answer 1

你可以使用fetch(). 它是一个异步函数，因此您需要使用async/awaitPromises。

class MyComponent extends HTMLElement {

    async connectedCallback() {
        let res = await fetch( 'my-component.html' )

        this.innerHTML = await res.text()
    }

}
customElements.define( 'my-component', MyComponent )