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

Question

可以使用类似这样的

lit-scss-loader

从外部文件加载样式：

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

如果您的元素模板只是静态 HTML，我不建议使用 LitElement。即使您没有使用 lit-html，您也需要支付加载它的费用。您可以直接使用LitElement的底层基类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;
  }

}

Answer 2

如果您想从外部 .html 文件将 lit-html 导入到 lit-element JavaScript 中，本文详细介绍了如何操作：

https://advancedfrontends.com/separate-lit-element-and-lit-html-templates/

这是我的博客文章，展示了如何配置和使用以下 npm rollup 插件：rollup-plugin-import-lithtml。它将允许 .html 文件导入到 lit-element 中。