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 )

Answer 2

I created a tool to allow you to write your HTML as regular files and allow you, if you want it, to create translations that can be incorporated into each component.

It uses rollup to generate a compiled file that includes your JS, HTML, CSS and language info.

https://www.npmjs.com/package/component-build-tools

I am working on an upgrade that makes it simpler and does not require the combining of the files into one. I will adjust this answer once that is done.