Web components, how to separate HTML from code

Question

I would like to know if it is possible (I am using ES6 and Typescript) to separate my HTML code from my components i.e. include the HTML code into a variable from another file.<

Answer 1

You could use fetch(). It's an asynchronous function so you'll avec to use async/await or Promises.

class MyComponent extends HTMLElement {

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

        this.innerHTML = await res.text()
    }

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