Load HTML as seperate file in lit-element

Question

It is possible to load styles from an external file using something lit-scss-loader like this:

import style from './someStyle.scss';

@customElement('some-element')
export class SomeElement extends LitElement {

    static get styles() {
       return [<any>style];
    }

}

However, I cannot figure out how to load HTML content from an external file. (Similar to how Angular allows you to either use inline HTML or pull it in from a file.)

I have tried the following:

import content from './someContent.html';

@customElement('some-element')
export class SomeElement extends LitElement {

    render() {
        return html`<${content}`;
    }
}

Is there a webpack loader that I am missing to make something like this possible? A method that I am not aware of?

Answer 1

Rollup has something like this: https://www.npmjs.com/package/rollup-plugin-html

If your element's template is just static HTML though, I would not recommend using LitElement. You'll pay for the cost of loading lit-html even though you're not using it. You can use LitElement's underlying base class, UpdatingElement, directly:

import {UpdatingElement, customElement} from 'lit-element';
import content from './someContent.html';

@customElement('some-element')
export class SomeElement extends UpdatingElement {

  constructor() {
    super();
    this.shadowRoot.innerHTML = content;
  }

}