Создайте 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

Спасибо за чтение!