Предоставляя тонкую оболочку вокруг веб-компонентов, lit-element помогает уменьшить количество шаблонов, необходимых для реакции на изменения свойств и атрибутов. Он также обеспечивает более естественный способ написания html благодаря lit-html, делая веб-компоненты ближе к компонентам React ...

Мы создадим компонент, который извлекает список альбомов, выпущенных данным исполнителем, и отображает их в хронологическом порядке. Мы будем использовать musicbrainz, который предоставляет бесплатный API для извлечения данных. Поскольку TypeScript обрабатывается babel, начиная с версии 7, мы будем использовать babel для транспиляции кода и свертки для обработки сборки.

Создание светового элемента

Просто нужно создать класс и унаследовать его от LitElement, а затем реализовать метод render(). Этот метод возвращает шаблон html (см. Lit-html). Затем вы можете определить настраиваемый элемент, как и для собственного веб-компонента.

import { LitElement, html, property } from "@polymer/lit-element";
class ArtistReleases extends LitElement {
      render() {...}
}
customElements.define('artist-releases', ArtistReleases);

Наблюдаемые свойства

С lit-element есть разные способы обработки свойств. Здесь мы используем геттер статических свойств. Это позволяет нам указывать идентификатор исполнителя и код страны при загрузке компонента, а также отслеживать изменения в свойстве `data`.

static get properties() {
    return {
      artistId: { type: String },
      data: { type: Array },
      country: { type: String }
    };
}

Получение данных

Используя жизненный цикл веб-компонента, мы можем получить данные, когда компонент добавлен в DOM:

connectedCallback() {
    super.connectedCallback();
    if (this.artistId && this.country) {
      this.fetchData();
    }
}

В функции `fetchData ()` мы устанавливаем свойство data. Поскольку data находится в списке свойств, он запускает `render ()`

fetchData() {
    fetch(
      `//musicbrainz.org/ws/2/artist/${this.artistId}?inc=releases&fmt=json`
    )
      .then(res => res.json())
      .then(response => {
        this.data = response;
      })
      .catch(error => console.error("Error:", error));
  }

Рендеринг

Функция рендеринга довольно проста. Если data не установлен, мы отображаем сообщение «Загрузка», в противном случае мы перебираем данные и используем строковые шаблоны html, как показано ниже:

html`<li>${r.title} ${r.date}</li>`

Вот полная функция render ():

render() {
    if (!this.data) {
      return html`
        <h4>Loading...</h4>
      `;
    }
    const { name, releases } = this.data;
    const sortedReleases = releases
      .sort((a, b) => (a.date > b.date ? 1 : b.date > a.date ? -1 : 0))
      .filter(rel => rel.country === this.country);
    return html`
      <style>
        :host {
          font-family: Roboto, Helvetica, Arial, sans-serif;
          font-size: 16px;
          padding: 2rem;
        }
        ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        li {
          line-height: 1.6rem;
        }
      </style>
      <h2>${name}</h2>
      <ul>
        ${
          sortedReleases.map(
            r =>
              html`
                <li>${r.title} ${r.date}</li>
              `
          )}
    </ul>`}
}

Демо: https://lead-giraffe.glitch.me

Код: https://glitch.com/edit/#!/lead-giraffe