既存のプロジェクトに Lit を追加する

Lit は特別なツールを必要とせず、Lit コンポーネントはあらゆる JavaScript フレームワークや、あらゆるサーバーテンプレートシステムまたは CMS で動作するため、既存のプロジェクトやアプリケーションに追加するのに理想的です。

まず、npm から lit パッケージをインストールします

npm i lit

JavaScript の依存関係の管理に npm をまだ使用していない場合は、まずプロジェクトをセットアップする必要があります。 npm CLI を推奨します。

プロジェクトのソースの任意の場所に新しい要素を作成できます

lib/components/my-element.ts

import {LitElement, html} from 'lit';
import {customElement} from 'lit/decorators.js';

@customElement('my-element')
class MyElement extends LitElement {
  render() {
    return html`
      <div>Hello from MyElement!</div>
    `;
  }
}

import {LitElement, html} from 'lit';

class MyElement extends LitElement {
  render() {
    return html`
      <div>Hello from MyElement!</div>
    `;
  }
}
customElements.define('my-element', MyElement);

コンポーネントの使用方法は、プロジェクトと使用するライブラリまたはフレームワークによって異なります。 HTML、DOM API、またはテンプレート言語でコンポーネントを使用できます

<script type="module" src="/lib/components/my-elements.js">
<my-element></my-element>

JSX は非常に一般的なテンプレート言語です。 JSX では、小文字の要素名で HTML 要素が作成され、これが Lit コンポーネントになります。 @customElement() デコレーターで指定したタグ名を使用します

import './components/my-elements.js';

export const App = () => (
  <h1>My App</h1>
  <my-element></my-element>
)

ほとんどの JavaScript フレームワークは、Web コンポーネントと Lit を大いにサポートしています。要素の定義をインポートして、テンプレートで要素のタグ名を使用するだけです。

この時点で、プロジェクトをビルドして実行し、「Hello from MyElement!」というメッセージが表示されるはずです。

コンポーネントに機能を追加する準備ができたら、コンポーネントにアクセスして、最初の Lit コンポーネントの作成について学ぶか、テンプレートでテンプレートの作成の詳細を参照してください。

いくつかのサンプル Rollup 設定を含む、プロジェクトのビルドの詳細については、本番環境向けビルドを参照してください。

このページを編集