Начало работы

lit-html распространяется через npm в составе пакета lit-html.

npm install lit-html

Вы также можете загружать lit-html напрямую с CDN с хорошей поддержкой модулей, например esm.run или esm.sh:

import {html, render} from 'https://esm.run/lit-html@1';

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

• CodeSandbox
• JSBin
• StackBlitz

lit-html написан на стандартных модулях JavaScript и распространяется в виде таких модулей. Поддержка модулей в средах JavaScript постоянно расширяется; они уже доступны в Chrome, Firefox, Edge, Safari и Opera.

Чтобы использовать lit-html, импортируйте его, указав путь:

<script type="module">
  import {html, render} from './node_modules/lit-html/lit-html.js';
  ...
</script>

Инструкция JavaScript import работает только внутри скриптов-модулей (<script type="module">), которые могут быть встроенными скриптами (как показано выше) или внешними скриптами.

Используемый путь зависит от того, куда вы установили lit-html. Браузеры поддерживают импорт других модулей только по пути, а не по имени пакета, поэтому без дополнительных инструментов вам придётся указывать пути.

Если вы используете инструмент, который преобразует имена пакетов в пути, то можете импортировать по имени пакета:

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

Для простоты в примерах этой документации используются имена пакетов (также известные как спецификаторы модулей в стиле Node.js).

См. раздел Инструменты, чтобы узнать о средствах сборки и серверах разработки, с помощью которых можно преобразовывать спецификаторы модулей в стиле Node.js в спецификаторы модулей в стиле браузера.

Почему модули JavaScript? Подробнее о том, почему lit-html распространяется в виде модулей JavaScript, см. в разделе Модули JavaScript.

У lit-html есть два основных API:

• Тег шаблонного литерала html для создания шаблонов.
• Функция render() для отображения шаблона в DOM-контейнере.

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

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

// Render the template to the document
render(myTemplate('World'), document.body);

Подробнее о шаблонах см. в разделе Создание шаблонов.

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