Создайте и опробуйте свой веб-компонент быстро

В предыдущем посте Я написал статью о том, как написать веб-компонент, используя только обычный JavaScript. В этом новом посте мы увидим, как это сделать быстро, избегая шаблонного кода.

Мы можем создать веб-компонент только с помощью ванильного JS, но вскоре мы поймем, что повторяем большую часть кода, чтобы сделать то же самое. LitElement помогает определять веб-компоненты без необходимости изучать настраиваемый язык шаблонов и следовать стандартам веб-компонентов, поэтому наши компоненты будут работать с каждой структурой или ванильным js.

LitElement использует lit-html для определения и отображения HTML-шаблонов. Lit-Html позволяет нам писать шаблоны HTML на JavaScript, а затем выполнять рендеринг и повторный рендеринг этих шаблонов вместе с данными для создания и обновления DOM. lit-html обновляет только те разделы шаблонов, которые меняются. Он не выполняет повторную визуализацию всего вида.

Без лишних слов, давайте начнем создавать простой веб-компонент с использованием LitElement.

Мы собираемся создавать наш пользовательский компонент ‹my-component› шаг за шагом.

Примечание. Для простоты я собираюсь использовать онлайн-редактор Html в режиме реального времени для создания нашего веб-компонента. Но вы можете использовать все, что захотите, например, NodeJs с менеджером пакетов npm.

Чтобы следовать этому руководству, желательно иметь базовые знания в следующих областях:

  • HTML, CSS и Javascript.
  • Модули Javascript
  • Стрелочные функции

В настоящее время ваш браузер не поддерживает тег ‹my-component›. Когда браузер обнаруживает неизвестный тег HTML, например ‹my-component›, он отображает его как встроенный элемент и продолжает представлять следующие элементы.

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>lit-element code sample</title> 
</head>
<body>
  <my-component></my-component> 
</body>
</html>

Во-первых, нам нужно импортировать базовый класс LitElement и вспомогательную функцию html. Обратите внимание, что в Интернете вы можете указать браузерам обрабатывать раздел ‹script› как модуль, установив в теге script для атрибута type значение «module».

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>lit-element code example</title> 
</head>
<body>
  <my-component></my-component>
<script type="module">
    import {LitElement, html} 
      from 'https://unpkg.com/lit-element?module';  
  </script>
</body>
</html>

Создайте наш класс компонента, расширяющий базовый класс LitElement:

class MyComponent extends  LitElement {  
   constructor() {
        super();
   }
  ...
}

Здесь мы собираемся реализовать метод «рендеринга», чтобы установить шаблон для нашего элемента. Метод рендеринга должен возвращать «lit-html TemplateResult». Чтобы создать «TemplateResult», мы должны пометить литерал шаблона JavaScript с помощью вспомогательной функции «html»:

class MyComponent extends  LitElement { 
   render() {
    return html`
      <!-- template content -->
      <p>Hello! I'm a Web component, 
        Which simulates a counter...
      </p>
      <p>Count: 0</p>`
   }
}

Теперь мы собираемся инициализировать свойство counter в нашем классе конструктора.

Свойства определяются с помощью статического получателя. LitElement декодирует любые атрибуты html, установленные в этом компоненте, как свойства, которые можно использовать из javascript. Любые изменения свойств, определенных в статических свойствах, вызывают повторную визуализацию компонента. Поддерживаемые типы: Number, String, Boolean и Array Object.

class MyComponent extends  LitElement { 
   constructor() {
        super();
        this.counter = 0;
   }
 
   static get properties() {
         return {
          counter: {type: Number}
         }
   }
   render() {
    return html`
      <p>Hello! I'm a Web component, 
        Which simulates a counter...
      </p>
      <p>Count: </p>`
   }
}

На следующем шаге добавьте внутри класса метод для увеличения свойства счетчика:

count(e) {
       this.counter ++;
       console.log( this.counter);
}

Размещаем наш счетчик свойств и кнопку его увеличения в нашем html шаблоне.

Динамические разделы вашего шаблона задаются с помощью строковых выражений шаблона. Мы можем использовать любое допустимое выражение javascript и позволить lit-html обрабатывать обновление dom.

В litElement мы используем синтаксис: @ {onclick, change,…} для регистрации встроенных обработчиков событий:

render() {
...
<button @click="${(e) =>  
    this.count(e)}">
    Press me to count!!</button>
 `
 ;
}

Добавить несколько стилей в наш компонент очень просто:

Стили следует добавлять как статический получатель. Они оцениваются один раз, а затем добавляются в теневое пространство элемента. Shadow Dom заботится о масштабировании CSS вашего элемента только для того, чтобы повлиять на шаблон вашего элемента, а не на другие аспекты вне компонента.

Импортируйте вспомогательный метод css:

import {LitElement, html, css}
       from 'https://unpkg.com/lit-element?module';

И добавьте метод получения static styles ():

class MyComponent extends  LitElement {
 ...
 static get styles() {
    return css`
      :host {
        display: block;
      }
     .counter{
        color: red;
      } 
    `;
 ...
}

Добавьте наш класс css в наш тег html:

render() {
  ...
  <p class="counter">
    Count:${this.counter}
  </p>
  ...
}

И наконец, нам нужно зарегистрировать наш компонент в браузере:

customElements.define('my-component', MyComponent);

Теперь мы можем попробовать это в онлайн-редакторе html.

<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>lit-element code sample</title> 
</head>
<body>
<my-component></my-component>
<script type="module">
     
import {LitElement, html, css}
       from 'https://unpkg.com/lit-element?module';
class MyComponent extends LitElement {
  static get properties() {
          return {
            counter: {type: Number}
         }
  }
  constructor() {
         super();
         this.counter = 0;
       }
  static get styles() {
       return css`
         :host {
            display: block;
          }
         .counter{
            color: red;
         }        
      `;
    }
 render() {
     return html`
         <p>Hello! I'm a Web  
            component, 
            Which simulates a                       
            counter...
         </p>
     <p class='counter'>
          Count:${this.counter}</p>
     <button @click="${(e) =>  
          this.count(e)}">Press me to 
         counting!!</button>
        `
       ;
 }//end render method
 count(e) {
       this.counter ++;
       console.log( this.counter);
 }
}//end of class
 
  
//Register componet 
customElements.define('my-component',   
   MyComponent);
</script>
 
</body>
</html>

Вывод

В этой статье мы видели простой пример того, как создать веб-компонент. Но с помощью LitElement / lit-html вы можете создать любой тип компонента. LitElement - очень мощный инструмент, который помогает нам разрабатывать код быстрее, понятнее и делать меньше ошибок.

Большое спасибо за чтение этой небольшой статьи. Надеюсь, она была для вас полезна!

использованная литература

ЛитЭлемент