Использование lit-html отдельно

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

Пакет lit-html можно установить отдельно от lit:

npm install lit-html

Основные импорты — html и render:

import {html, render} from 'lit-html';

Отдельный пакет lit-html также включает модули для следующих возможностей, описанных в полном руководстве для разработчиков Lit:

• lit-html/directives/* — Встроенные директивы
• lit-html/directive.js — Пользовательские директивы
• lit-html/async-directive.js — Пользовательские асинхронные директивы
• lit-html/directive-helpers.js — Вспомогательные директивы для императивных обновлений
• lit-html/static.js — Статический тег html
• lit-html/polyfill-support.js — Поддержка взаимодействия с полифилами веб-компонентов (см. раздел Стили и шаблоны lit-html)

Шаблоны Lit записываются с помощью шаблонных литералов JavaScript с тегом html. Содержимое литерала состоит в основном из обычного декларативного HTML и может включать выражения для вставки и обновления динамических частей шаблона (полное описание синтаксиса шаблонов Lit см. в разделе Шаблоны).

html`<h1>Hello ${name}</h1>`

Выражение шаблона lit-html не приводит к созданию или обновлению DOM. Оно лишь описывает DOM и называется TemplateResult. Чтобы фактически создать или обновить DOM, нужно передать TemplateResult функции render() вместе с контейнером, в котором будет выполняться рендеринг:

import {html, render} from 'lit-html';

const name = 'world';
const sayHi = html`<h1>Hello ${name}</h1>`;
render(sayHi, document.body);

Чтобы сделать шаблон динамическим, можно создать функцию шаблона. Вызывайте эту функцию каждый раз при изменении данных.

import {html, render} from 'lit-html';

// Define a template function
const myTemplate = (name) => html`<div>Hello ${name}</div>`;

// Render the template with some data
render(myTemplate('earth'), document.body);

// ... Later on ...
// Render the template with different data
render(myTemplate('mars'), document.body);

При вызове функции шаблона lit-html сохраняет текущие значения выражений. Функция шаблона не создает узлы DOM, поэтому она работает быстро и требует мало ресурсов.

Функция шаблона возвращает TemplateResult, содержащий шаблон и входные данные. Это один из основных принципов использования lit-html: создание пользовательского интерфейса как функции состояния.

При вызове render lit-html обновляет только те части шаблона, которые изменились с момента последнего рендеринга. Благодаря этому обновления lit-html выполняются очень быстро.

Метод render также принимает аргумент options, который позволяет указать следующие параметры:

• host: значение this, используемое при вызове обработчиков событий, зарегистрированных с помощью синтаксиса @eventName. Этот параметр применяется только в том случае, если обработчик события задан как обычная функция. Если обработчик события задан с помощью объекта обработчика событий, этот объект используется в качестве значения this. Подробнее об обработчиках событий см. в разделе Выражения обработчиков событий.

• renderBefore: необязательный узел-ссылка внутри container, перед которым lit-html будет выполнять рендеринг. По умолчанию lit-html добавляет содержимое в конец контейнера. Параметр renderBefore позволяет выполнять рендеринг в указанном месте внутри контейнера.

• creationScope: объект, для которого lit-html будет вызывать importNode при клонировании шаблонов (по умолчанию — document). Этот параметр предназначен для расширенных сценариев использования.

Например, при отдельном использовании lit-html можно задать параметры рендеринга следующим образом:

<div id="container">
  <header>My Site</header>
  <footer>Copyright 2021</footer>
</div>

const template = () => html`...`;
const container = document.getElementById('container');
const renderBefore = container.querySelector('footer');
render(template(), container, {renderBefore});

В приведенном выше примере шаблон будет отображен между элементами <header> и <footer>.

lit-html отвечает за одну задачу: рендеринг HTML. Способ применения стилей к HTML, создаваемому lit-html, зависит от того, как вы его используете. Например, если вы применяете lit-html внутри системы компонентов, такой как LitElement, можно следовать принятым в этой системе компонентам подходам.

В целом способ стилизации HTML зависит от того, используете ли вы теневой DOM:

• Если рендеринг выполняется не в теневой DOM, можно стилизовать HTML с помощью глобальных таблиц стилей.
• Если рендеринг выполняется в теневой DOM, можно создавать теги <style> внутри корня теневого DOM.

Для динамической стилизации lit-html предоставляет две директивы, позволяющие управлять атрибутами class и style элемента:

• classMap задает классы элемента на основе свойств объекта.
• styleMap задает стили элемента на основе набора свойств стилей и их значений.

Редактировать эту страницу