将 HTML 作为单独文件加载到 lit-element

Question

可以使用lit-scss-loader从外部文件加载 styles，如下所示：

import style from './someStyle.scss';

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

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

}

但是，我无法弄清楚如何从外部文件加载 HTML 内容。 （类似于 Angular 允许您使用内联 HTML 或从文件中提取它。）

我尝试了以下方法：

import content from './someContent.html';

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

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

是否有我缺少的 webpack 加载程序来使这样的事情成为可能？ 一种我不知道的方法？

Answer 1

Rollup 有这样的东西： https://www.npmjs.com/package/rollup-plugin-html

如果您的元素模板只是 static HTML，我不建议使用 LitElement。 即使您不使用它，您也需要支付加载 lit-html 的费用。 您可以直接使用 LitElement 的底层基础 class，UpdatingElement：

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;
  }

}