从 Javascript Lit 元素中分离 HTML 和 CSS

Question

我们正在使用 Lit Element 并且我们的组件文件变得相当大，因为我们必须在 .js 文件中编写样式和 html。有没有办法将它们拆分成单独的文件，然后将它们导入到我们的组件中？这样做的最佳方法是什么？HTML 和 CSS 尤其让我们的工作流程变得困难，因为我们的文件变得过于臃肿。

更新：Supersharp 的建议帮助我分离了 CSS 和 html 模板，但我在将 html 模板与指定属性绑定时遇到了问题。我有一个服务文件，它为我指定的文件发出 XML 请求，我将它导入到我的组件文件中。这是我的组件：

import { LitElement, html} from '@polymer/lit-element';

import HtmlLoader from './Service/HtmlLoader';

class TestAnimatedButtonElement extends LitElement {

  static get properties() {
    return {
      _text: {
        type: String
      }
    }
  }

  constructor() {
    super();
    this.htmlTemplate = HtmlLoader.prototype.getHtmlTemplate('/src/Components/ExampleElements/test-animated-button-element.html');
  }

  render(){
    this.htmlTemplate.then( template => this.shadowRoot.innerHTML = template)
    return html( [this.htmlTemplate] );
  }

  handleButton(e) {
    //e.preventDefault();
    console.log('Button pressed');
  }
}
customElements.define('test-animated-button-element', TestAnimatedButtonElement);

这是我的 html 文件：

<link rel="stylesheet" href="src/Components/animatedButton/animated-button-element.css"/>
<a href="#" class="btn btn--white btn--animated" @click="${(e) => this.handleButton(e)}">${this._text}</a>

这是我用来制作 XMLHttpRequest 的服务文件：

export default class HtmlLoader {

    xhrCall(url){
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.onload = () => resolve(xhr.responseText);
        xhr.onerror = () => reject(xhr.statusText);
        xhr.send();
      });
    }

    getHtmlTemplate(url) {
       return this.xhrCall(url);
    }

}

Answer 1

您可以分别导入 CSS 和 HTML 部分。

CSS

<link rel="stylesheet">在 HTML 代码中使用元素。

超文本标记语言

您可以使用 HTML 导入（已弃用）、XMLHttpRequest 或 fetch()，如这篇关于导入自定义元素模板的文章中所述。

更新

有了XMLHtpRequestPromise，你就会得到答案。

render(){
    this.htmlTemplate.then( template =>
        this.shadowRoot.innerHTML = template
    )
}