Создайте LitElement с нуля с помощью polymer-cli
Что такое ЛитЭлемент?
LitElement является частью проекта Polymer, в частности, это класс javascript, который после расширения другим классом упрощает разработку пользовательских элементов html.
Созданные таким образом компоненты можно использовать в любом приложении после компиляции.
Процесс компиляции
Одна из вещей, которые мне больше всего нравились в этих компонентах, - это процесс компиляции, для этого не обязательно использовать множество библиотек и зависимости узлов, как это происходит в других библиотеках.
После инициализации проекта с помощью узла вам нужно всего лишь установить пару вещей, полимер-cli (глобально) и lit-element.
npm install -g polymer-cli
npm install lit-element
Теперь вы можете использовать полимер-cli для обслуживания и сборки ваших компонентов.
// serve during debugging polymer serve // build for production polymer build
Пример LitComponent
Давайте посмотрим на пример простого проекта, в котором используется LitElement.
Создайте index.html, импортируйте компонент и поместите его тег
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lit Element Demo</title> <script src="custom-components/my-element.js" type="module"></script> </head> <body> <my-element mood="awesome"></my-element> </body> </html>
затем создайте папку custom-components, сюда мы поместим наши пользовательские элементы, обратите внимание, что эта папка не должна называться компонентами, прочтите это: html - папка« компоненты не отображается в освещенном элементе - переполнение стека»
Теперь мы можем создать наш собственный элемент
import { LitElement, html, css } from "lit-element"; class MyElement extends LitElement { static get properties() { return { mood: {type: String} } } static get styles() { return css`.mood { color: green; }`; } render() { return html`Web Components are <span class="mood">${this.mood}</span>!`; } } customElements.define('my-element', MyElement);
Вы можете скачать код здесь: GitHub - CertosinoLab / mediumarticles at Полимер-1
Спасибо за чтение!