Создайте и опробуйте свой веб-компонент быстро
В предыдущем посте Я написал статью о том, как написать веб-компонент, используя только обычный 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 - очень мощный инструмент, который помогает нам разрабатывать код быстрее, понятнее и делать меньше ошибок.
Большое спасибо за чтение этой небольшой статьи. Надеюсь, она была для вас полезна!