シンプル。 高速。 Webコンポーネント。
シンプル
定型句を省略
LitはWebコンポーネント標準に基づいて構築されており、あなたが必要としている機能を追加します。反応性、宣言型テンプレート、定型句を削減して作業を容易にするための思慮深い機能です。すべてのLit機能は、Webプラットフォームの進化を念頭に置いて慎重に設計されています。
高速
小さなフットプリント、インスタントアップデート
およそ5KB（最小化および圧縮）のLitは、バンドルサイズを小さく、読み込み時間を短くします。さらにレンダリングは非常に高速です。Litは更新時にUIの動的な部分のみを処理するため、仮想ツリーを作り直してDOMと差分をとる必要はありません。
Webコンポーネント
相互運用的で将来に対応
すべてのLitコンポーネントは、相互運用の超能力を持つネイティブのWebコンポーネントです。Webコンポーネントは、HTMLを使用する場所であればどこでも、フレームワークを使用するか使用しないかに関係なく動作します。このため、Litは共有可能なコンポーネント、デザインシステム、維持可能な将来に対応したサイトやアプリの構築に最適です。
import {html, css, LitElement} from 'lit';import {customElement, property} from 'lit/decorators.js';
@customElement('simple-greeting')export class SimpleGreeting extends LitElement { static styles = css`p { color: blue }`;
@property() name = 'Somebody';
render() { return html`<p>Hello, ${this.name}!</p>`; }}import {html, css, LitElement} from 'lit';
export class SimpleGreeting extends LitElement { static styles = css`p { color: blue }`;
static properties = { name: {type: String}, };
constructor() { super(); this.name = 'Somebody'; }
render() { return html`<p>Hello, ${this.name}!</p>`; }}customElements.define('simple-greeting', SimpleGreeting);<simple-greeting name="World"></simple-greeting>カスタムエレメント
Litコンポーネントは標準の*カスタムエレメント*なので、ブラウザはそれらを組み込み要素とまったく同じように扱います。手書きのHTMLまたはフレームワークコードで使用したり、CMSまたは静的サイトビルダーから出力したり、JavaScriptでインスタンスを作成したりします。とにかくとにかく機能します!
スコープ付きスタイル
Litはデフォルトで*シャドウDOM*を使用してスタイルにスコープを適用します。これにより、CSSセレクターをシンプルに保ち、コンポーネントのスタイルがページ上の他のスタイルに影響を与えたり、影響を受けたりしないようにします。
リアクティブプロパティ
コンポーネントのAPIと内部状態をモデル化するには、*リアクティブプロパティ*を宣言します。Litコンポーネントは、リアクティブプロパティ（または対応するHTML属性）が変更されるたびに効率的に再レンダリングされます。
宣言型テンプレート
Litテンプレートは*タグ付きテンプレートリテラル*に基づいており、シンプルで表現力豊かで高速です。ネイティブのJavaScript式がインラインに組み込まれたHTMLマークアップが特徴です。カスタム構文を学ぶ必要はなく、コンパイルも必要ありません。
Litで何でも構築
共有可能なコンポーネント
どのスタックでも構築されたあらゆるサイトにドロップできる、インタラクティブなコンテンツや機能を提供する必要がありますか？ネイティブにブラウザでサポートされているため、Webコンポーネントは完璧なソリューションであり、Litはそれらの構築を簡単化します。
デザインシステム
デザインシステムを使用すると、一貫して優れており、ブランドに合ったエクスペリエンスを作成できます。しかし、組織が複数のフレームワークを使用している場合はどうでしょうか？Litを使用すると、すべてのチームが利用できる1組のコンポーネントを構築できます。
サイトとアプリ
Litコンポーネントを使用して静的サイトを徐々に強化したり、アプリ全体を構築したりします。Webコンポーネントを採用することで、Litはロックインを最小限に抑え、保守性を促進します。製品の開発を中断することなく、一度に1つのコンポーネントを更新または移行します。
Litを探る
ライブチュートリアルをお試しください – インストール不要
チュートリアルインタラクティブな例で試してみる
PlayGround広範なドキュメントで詳しく調べる
ドキュメント参加するすべての選択肢を確認してください
開始Lit とウェブコンポーネントコミュニティの接続
新しいリリースの最新情報を入手し、ウェブコンポーネントの使用方法の詳細を学び、プロジェクトとフィードバックをチームと共有できます。すべてのコミュニティの参加は Lit の行動規範の対象となります。お互いに最高になりましょう！