Разделение HTML и CSS от элемента Javascript Lit

Question

Мы работаем с Lit Element, и наши файлы компонентов становятся довольно большими, потому что мы должны писать стили и HTML в файле .js.Есть ли способ разделить их на отдельные файлы и затем импортировать их в наши компоненты?Каков наилучший подход к этому?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

Это недостаток ES-модулей, и именно поэтому Google так долго настаивал на импорте HTML, несмотря на то, что другие поставщики браузеров мертвы против них.

Вы можете отделить свои CSS и JS, но выдобавление дополнительных туров в браузер, если вы получаете их во время выполнения.В частности, ваши шаблоны извлекаются асинхронно, если вы будете ждать их, вы будете блокировать основной поток JS, а если вы их await, то вы прервете lit-element, поскольку он ожидает, что корневой шаблон будет синхронным.

Вы могли бы (но не должны) использовать until:

import { until } from 'lit-html/directives/until';

...

render(){
    return html`until(
        this.loadTemplate(
            '/src/Components/ExampleElements/test-animated-button-element.html',
            this.foo, 
            this.bar), html`Loading...`)`;
}

async loadTemplate(path, ...parts) {
    // You're using templates you can use fetch, instead of XMLHttpRequest
    const r = await fetch(path, { method: 'GET', credentials: 'same-origin' });
    if(r.ok)
         return html(await r.text(), parts);

    return html`Not Found: ${path}`
}

Однако я заметил, что вы используете голые модули (т.е. без . в начале и .js в конце), поэтому вы не можете отправить этот файл напрямую в браузеры (ни один из них еще не может обрабатывать голые модули).Вкратце: у вас должно быть что-то, что превращается:

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

В:

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

Или объединяет их в один файл.Если вы делаете это, то почему бы не заставить ваш упаковщик (Webpack, RollupJS, Browserify и т. Д.) Импортировать ваши CSS и HTML в файл в время сборки ?

Наконец, с любым из этихРешения, которые вы теряете при написании частей <-> html, что не имеет значения для CSS, но усложнит разработку и поддержку HTML-частей.С такой библиотекой, как lit, вы хотите вашего HTML в своем JS по тем же причинам, по которым JSX / React / Preact работает так хорошо.Если ваши файлы слишком велики, то я не думаю, что решение состоит в том, чтобы разделить их с помощью JS / CSS / HTML, а вместо этого разделить их на несколько компонентов.

Так, например, предположим, у вас есть огромный <product-detail> control ...

Не

• product-detail.js
• product-detail.html
• product-detail.css

Do

• product-detail.js
• product-detail-sizes.js
• product-detail-specs.js
• product-detail-parts.js
• product-detail-preview.js
• и т. Д.

Разбейте каждый компонент, чтобы выполнить определенную задачу.Весь смысл lit-element состоит в том, чтобы сделать все это как можно более простым для создания, и вам нужно множество небольших автономных компонентов.

Answer 2

Отдельные части CSS и HTML можно импортировать.

CSS

Использование элемента <link rel="stylesheet"> в коде HTML.

HTML

Youможет использовать HTML Imports (устарело), ​​XMLHttpRequest или fetch (), как объясняется в этом посте о импорте шаблонов для пользовательских элементов .

Обновление

С XMLHtpRequest вы получите ответ в Обещании.

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