Веб-компоненты, как отделить HTML от кода

Question

Я хотел бы знать, возможно ли (я использую ES6 и Typescript) отделить мой HTML-код от моих компонентов, т.е. включить HTML-код в переменную из другого файла.

В настоящее время мы пишемвесь HTML внутри такой структуры:

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

Что явно не круто, когда у вас много HTML.

Есть ли способ отделить мой HTML от моего компонента Javascript, чтобы я мог сделать, например:

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

Answer 1

Я создал инструмент, позволяющий вам записывать HTML-код в виде обычных файлов и позволяющий, при желании, создавать переводы, которые можно включать в каждый компонент.

Он использует rollup для генерациискомпилированный файл, содержащий информацию о JS, HTML, CSS и языке.

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

Я работаю над обновлением, которое упрощает его и не требует объединения файлов водин.Я исправлю этот ответ, как только это будет сделано.

Answer 2

Вы можете использовать fetch().Это асинхронная функция, поэтому вы можете использовать async/await или Promises.

class MyComponent extends HTMLElement {

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

        this.innerHTML = await res.text()
    }

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