Litの基礎 / Learch

Lit の基礎

Lit は、Web Components の開発を簡素化し、より宣言的で効率的な方法を提供します。以下は、Lit を使用して基本的なカスタムエレメントを作成するためのステップです。

1. カスタムエレメントの作成

最初のステップとして、シンプルなメッセージを表示するカスタムエレメントを作成します。

// my-element.js
import { LitElement, html } from 'lit';

class MyElement extends LitElement {
  render() {
    return html`<p>Hello, Lit!</p>`;
  }
}

customElements.define('my-element', MyElement);

このコードは、<my-element>という新しいカスタムエレメントを定義します。renderメソッド内で、htmlテンプレートリテラルタグを使用して、表示する HTML を宣言的に定義します。

2. プロパティと属性の管理

Lit では、コンポーネントの状態をプロパティとして管理し、それをテンプレートに反映させることができます。以下のコードは、nameプロパティを持つエレメントを示しています。

// my-greeting.js
import { LitElement, html, property } from 'lit';

class MyGreeting extends LitElement {
  @property({ type: String }) name = 'World';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

customElements.define('my-greeting', MyGreeting);

@propertyデコレーターを使用することで、nameプロパティがリアクティブになり、その値が変更されると自動的にテンプレートが更新されます。

3. イベントの処理

Lit を使用すると、イベントリスナーを簡単にテンプレートに追加できます。以下のコードは、ボタンクリックイベントを処理する方法を示しています。

import { LitElement, html } from 'lit';

class MyButton extends LitElement {
  handleClick() {
    alert('Clicked!');
  }

  render() {
    return html`<button @click="${this.handleClick}">Click Me</button>`;
  }
}

customElements.define('my-button', MyButton);

@clickディレクティブを使用して、クリックイベントにリスナーを追加し、handleClickメソッドを呼び出します。

4. スタイリング

Lit では、コンポーネント内のスタイルをカプセル化することができます。以下の例では、コンポーネント内のテキストの色をスタイリングします。

import { LitElement, html, css } from 'lit';

class MyStyledElement extends LitElement {
  static styles = css`
    p {
      color: red;
    }
  `;

  render() {
    return html`<p>Styled Text</p>`;
  }
}

customElements.define('my-styled-element', MyStyledElement);

static stylesプロパティを使用して CSS を定義し、コンポーネント内のスタイルをカプセル化します。

Lit環境構築

Lit応用コンポーネントの開発