6

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

}
4

2 に答える 2

1

CSS と HTML パーツを個別にインポートできます。

CSS

<link rel="stylesheet">HTML コードで要素を使用します。

HTML

カスタム要素のテンプレートのインポートに関するこの投稿で説明されているように、HTML インポート (非推奨)、XMLHttpRequest、または fetch() を使用できます。

アップデート

Promise で答えを得ることXMLHtpRequestができます。

render(){
    this.htmlTemplate.then( template =>
        this.shadowRoot.innerHTML = template
    )
}
于 2018-11-29T16:48:13.407 に答える