要件

さまざまなブラウザやツールでLitを使用する上で知っておくべき最も重要なことは、次のとおりです。

• LitはES2021として公開されています。
• Litは、モジュールのインポートに「ベアマジュール指定子」を使用します。
• Litは、<template>、カスタム要素、シャドウDOM、ParentNodeなどの最新のWeb APIを使用します。

これらの機能は、主要なブラウザ（Chrome、Edge、Safari、Firefoxなど）の最新バージョンと、ほとんどの一般的なツール（Rollup、Webpack、Babel、Terserなど）でサポートされています。ただし、ブラウザでのベアマジュール指定子のサポートは例外です。

Litを使用してアプリを開発する場合、ターゲットブラウザがこれらの機能をネイティブにサポートしているか、ツールがそれらを処理する必要があります。最新のWeb機能のサポートが異なる多くのブラウザがありますが、簡潔にするために、ブラウザを次の2つのカテゴリのいずれかに分類することをお勧めします。

• モダンブラウザはES2021とWebコンポーネントをサポートしています。ツールはベアマジュール指定子を解決する必要があります。
• レガシーブラウザはES5をサポートしており、Webコンポーネントまたは新しいDOM APIをサポートしていません。ツールはJavaScriptをコンパイルし、ポリフィルを読み込む必要があります。

このページでは、開発環境と本番環境でこれらの要件を満たす方法の概要を説明します.

これらの要件を満たすツールと構成の推奨事項については、開発、テスト、および本番環境向けビルドを参照してください。

モダンブラウザでLitを使用するために必要な変換は、ベアマジュール指定子をブラウザ互換のURLに変換することだけです。

Litは、次のように、サブパッケージ間でモジュールをインポートするためにベアマジュール指定子を使用します。

import {html} from 'lit-html';

モダンブラウザは現在、URLまたは相対パスからのモジュールの読み込みのみをサポートしており、npmパッケージを参照するベア名を読み込むことはできません。そのため、ビルドシステムがそれらを処理する必要があります。これは、指定子をブラウザのESモジュールで機能するものに変換するか、異なるタイプのモジュールを出力として生成することによって行う必要があります.

Webpackはベアマジュール指定子を自動的に処理します。Rollupの場合は、プラグイン（@rollup/plugin-node-resolve）が必要になります。

なぜベアマジュール指定子なのか？ ベアマジュール指定子を使用すると、パッケージマネージャーがモジュールをどこにインストールしたかを正確に知らなくても、モジュールをインポートできます。インポートマップと呼ばれる標準の提案が提供され始めています。これにより、ブラウザはベアマジュール指定子をサポートできるようになります。それまでの間、ベアマジュール指定子はビルドステップとして簡単に変換できます。インポートマップをサポートするポリフィルやモジュールローダーもあります。

すべてのモダンブラウザは自動的に更新され、ユーザーは最新バージョンを使用している可能性が非常に高くなります。 Litと関連ライブラリは、Chromium、Safari、Firefoxの現在のバージョン、およびChromiumとSafariの2つのメジャーバージョン以前、およびFirefoxの拡張サポートリリース（ESR）でテストされています。古いバージョンでも動作する可能性がありますが、保証はなく、最善の努力が払われます。

Lit 3はレガシーブラウザではテストされていません。具体的には、Internet Explorer 11とClassic Edgeは、非標準のDOM動作のためサポートされていません。レガシーブラウザをサポートする必要がある場合は、レガシーブラウザ向けビルドで説明されているように、追加のコンパイルやポリフィルを使用してLit 2を使用することを検討してください。

このページを編集