Lit公式ドキュメントまとめ Components

Lit公式ドキュメントまとめ 01

最近アサインされたプロジェクトがLitを使うプロジェクトだったので、Litを使い始めました。
最初はなんでReactじゃないんだろうと思って少々不満でしたが、1ヶ月も使うとだいぶ馴染んできて、いい感じになってきました。
コンポーネントの再レンダリングなんかはLitが自動でやってくれるので、Reactより良いなと思える部分が増えてきました！

Litとは

Googleが提供しているWeb Componentを簡単に作れるライブラリ。
Web ComponentはWeb標準技術なので、他のあらゆるWebライブラリ/フレームワークから呼び出すことができます。

導入

導入は公式のチュートリアルを実施すれば良い。 https://lit.dev/tutorials/

とても良くできたチュートリアルで、左側で問題を見ながら右側のプレイグラウンドでコードを実行できます。
わからなくなったら回答も即座に実行することができるため、非常に優秀。

Lit公式ドキュメントまとめ Components

Lit公式ドキュメント https://lit.dev/docs/components/properties/#public-properties-and-internal-state

Litには当然だが様々な機能が有り、1，2ヶ月触った程度では一部しか理解できていないことがわかりました。
網羅的に理解したいので、Lit公式ドキュメントを頭から読んでいき、その記録をつけたいと思います。

Components

Componentsの定義

TSの場合

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement { /* ... */ }

JSの場合

export class SimpleGreeting extends LitElement { /* ... */  }
customElements.define('simple-greeting', SimpleGreeting);

TSの方はデコレータで定義できるため、タイプ数が減らせて良いですね。

Lit ComponentsはHTML Elementと同等に扱うことができる

上記で作られたLit ComponentはHTML elementであるため、以下のようにHTMLタグとして利用することができます。

<simple-greeting name="Markup"></simple-greeting>

また、JSからも以下のように利用することができます。

const greeting = document.createElement('simple-greeting');

なぜLit ComponentsがHTMLであるかというと、Lit Componentsの基底クラスはHTML Elementだからのようです。

TypeScriptでLitの型定義を作る方法

TypeScriptでLitを使う場合、型定義の恩恵を受けるために、HTMLElementTagNameMapを使うと良いみたいです。

@customElement('my-element')
export class MyElement extends LitElement {
  @property({type: Number})
  aNumber: number = 5;
  /* ... */
}

// ここで型定義の関連付けを行っている
declare global {
  interface HTMLElementTagNameMap {
    "my-element": MyElement;
  }
}

利用方法は通常と同じでよいです。

const myElement = document.createElement('my-element');
myElement.aNumber = 10;

Googleは公式に、このHTMLElementTagMapを用いて、さらにnpm packageにて型定義をファイルである.d.tsを公開することを推奨しています。