Использование 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. Способ применения стилей к созданному lit-html HTML зависит от того, как вы его используете. Например, если вы используете lit-html внутри системы компонентов, такой как LitElement, следуйте шаблонам, принятым в этой системе компонентов.

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

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

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

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

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