Требования

Самое важное, что нужно знать о Lit для работы с различными браузерами и инструментами:

• Lit публикуется в формате ES2021.
• Для импорта модулей Lit использует «голые спецификаторы модулей».
• Lit использует современные веб-API, такие как <template>, пользовательские элементы, Shadow DOM и ParentNode.

Эти возможности поддерживаются последними версиями основных браузеров (включая Chrome, Edge, Safari и Firefox) и большинством популярных инструментов (таких как Rollup, Webpack, Babel и Terser). Исключение составляет поддержка голых спецификаторов модулей в браузерах.

При разработке приложения с использованием Lit целевые браузеры должны поддерживать эти возможности нативно либо их обработку должны обеспечивать ваши инструменты. Существует множество браузеров с различным уровнем поддержки современных веб-возможностей, поэтому для простоты мы рекомендуем разделить браузеры на две категории:

• Современные браузеры поддерживают ES2021 и веб-компоненты. Инструменты должны разрешать голые спецификаторы модулей.
• Устаревшие браузеры поддерживают ES5 и не поддерживают веб-компоненты или более новые API DOM. Инструменты должны компилировать JavaScript и загружать полифилы.

На этой странице приводится общий обзор того, как обеспечить выполнение этих требований в средах разработки и производства.

Рекомендации по инструментам и конфигурациям, отвечающим этим требованиям, см. в разделах Разработка, Тестирование и Сборка для production.

Для использования Lit в современных браузерах требуется только преобразовать голые спецификаторы модулей в URL-адреса, совместимые с браузерами.

Для импорта модулей между подмодулями Lit используются голые спецификаторы модулей, например:

import {html} from 'lit-html';

В настоящее время современные браузеры поддерживают загрузку модулей только по URL-адресам или относительным путям, но не по голым именам, указывающим на пакет npm, поэтому это должна обрабатывать система сборки. Для этого спецификатор нужно преобразовать в формат, подходящий для ES-модулей в браузере, либо сформировать на выходе модуль другого типа.

Webpack автоматически обрабатывает голые спецификаторы модулей; для Rollup потребуется плагин (@rollup/plugin-node-resolve).

Почему используются голые спецификаторы модулей? Они позволяют импортировать модули, не зная точного расположения пакетов, установленного менеджером пакетов. Предложение по стандартизации под названием Import maps начинает внедряться и позволит браузерам поддерживать голые спецификаторы модулей. А пока голые спецификаторы импорта можно легко преобразовать на этапе сборки. Кроме того, существуют полифилы и загрузчики модулей с поддержкой карт импорта.

Все современные браузеры обновляются автоматически, поэтому у пользователей с высокой вероятностью установлена свежая версия. Lit и связанные с ним библиотеки тестируются на текущих версиях Chromium, Safari и Firefox, а также на двух предыдущих основных версиях Chromium и Safari и на версии с расширенной поддержкой (ESR) Firefox. Более старые версии могут работать, но их поддержка предоставляется по мере возможности и без гарантий.

Lit 3 не тестируется на устаревших браузерах. В частности, Internet Explorer 11 и Classic Edge не поддерживаются из-за нестандартного поведения DOM. Если вам необходимо поддерживать устаревшие браузеры, рассмотрите возможность использования Lit 2 с дополнительной компиляцией и/или полифилами, как описано в разделе Сборка для устаревших браузеров.

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