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

我想知道是否有可能（我正在使用ES6和Typescript）将HTML代码从组件中分离出来，即将HTML代码包含到另一个文件的变量中

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

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

您可以使用

fetch（）

。这是一个异步函数，因此您可以使用

async/await

或promissions

class MyComponent extends HTMLElement {

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

        this.innerHTML = await res.text()
    }

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

您可以使用

fetch（）

。这是一个异步函数，因此您可以使用

async/await

或promissions

class MyComponent extends HTMLElement {

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

        this.innerHTML = await res.text()
    }

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

---

我创建了一个工具，允许您将HTML编写为常规文件，如果需要，还允许您创建可以合并到每个组件中的翻译

它使用

rollup

生成一个包含JS、HTML、CSS和语言信息的编译文件

---

我正在进行一个升级，使它更简单，不需要将文件合并成一个文件。完成后，我将调整此答案。

我创建了一个工具，允许您将HTML编写为常规文件，并允许您（如果需要）创建可以合并到每个组件中的翻译

它使用

rollup

生成一个包含JS、HTML、CSS和语言信息的编译文件

我正在进行一个升级，使它更简单，不需要将文件合并成一个文件。完成后，我将调整此答案