つくってみる

前準備

LitElementを使うにはnpmとNode.jsが必要です。 npmとNode.jsをインストールするには、NodeJS.orgの説明を参照してください。

LitElementではJavaScriptモジュールが使用だれ、npmパッケージ名で依存関係をインポートします。Webブラウザではファイルのインポートに完全なURLが必要なため、ローカル開発サーバーはWebブラウザに完全に変換したURLパスを提供する必要があります。

ターゲットブラウザ向けに最適したビルドを公開するには、別個にビルドツールとバンドル処理をする必要があります。

1つの選択肢としてPolymer CLIにはモジュール名をその場でパスに変換する開発サーバーが含まれています。そして公開のためにソースコードをパッケージ化するビルドツールも含まれています。

Polymer CLIをnpmでインストールするには:

npm install -g polymer-cli

ローカルの開発サーバを起動するには:

polymer-serve

ツールの設定やもっと詳しい情報はPolymer CLI ドキュメントを参照してください。

コンポーネントの作り方へ読み進めるか、LitElementのサンプルプロジェクトをダウンロードしてください。

コンポーネントを作る

LitElementを使ったクラスを作成するには:

例として:

my-element.js

// `LitElement`のベースクラスと`html`ヘルパー関数をインポート
import { LitElement, html } from 'lit-element';

// `LitElement`のベースクラスを継承
class MyElement extends LitElement {

  /**
   * テンプレートを描画する`render`関数を実装
   * 
   * LitElementを継承している場合、必ず`render`関数を
   * 実装していなければいけません
   */
  render(){
    /** 
     * `render`はlit-htmlの`TemplateResult`を返します
     *
     * `TemplateResult`を作るのに、`html`ヘルパー関数の
     * JavaScriptタグリテラルを使います
     */
    return html`
      <!-- テンプレートの内容 -->
      <p>A paragraph</p>
    `;
  }
}
// 新しいHTML要素をブラウザに登録
customElements.define('my-element', MyElement);

TypeScriptデコレータを使う

TypeScriptの@customElementデコレータを使って要素を定義できます:

/**
 * LitElementのベースクラスとhtmlヘルパー関数及び
 * TypeScriptのデコレータをインポート
 **/
import {
  LitElement, html, customElement, property
} from 'lit-element';

/**
 * customElementデコレータを使ってカスタム要素を定義。
 * <my-element>がHTMLタグとして登録される
 */
@customElement('my-element')
export class MyElement extends LitElement {

  /**
   * プロパティの定義。更新時にトリガされる
   */
  @property()
  foo = 'foo';

  /**
   * テンプレートを描画する`render`関数を実装
   */
  render(){
    /**
     * JavaScript式を使ってテンプレートに
     * プロパティの値を表示
     */
    return html`<p>${this.foo}</p>`;
  }
}

コンポーネントのインポート

作成したコンポーネントのインポート

HTMLにおいて:

<head>
  <script type="module" src="/path/to/my-element.js"></script>
</head>
<body>
  <my-element></my-element>
</body>

他のJavaScriptモジュールからは:

// 相対パスを指定
import './my-element.js';

class MyOtherElement extends LitElement{
  render(){
    return html`
      <my-element></my-element>
    `;
  }
}
customElements.define('my-other-element', MyOtherElement);

他の人が作成したコンポーネントのインポート

他の人が作成したコンポーネントを使う場合にはちゃんとその文書を参照しましょう 他者による既存のコンポーネントはそれ自体のドキュメントを読むべきです。このガイドにおいては、npmで公開されているほとんどのLitElementベースのコンポーネントで通用するでしょう。

多くのコンポーネントnpmで公開されており、下記のコマンドラインでインストールできます:

cd my-project-folder
npm install package-name --save

HTMLからは読み込むにはnode_modulesフォルダを指定します:

<head>
  <script type="module" src="node_modules/package-name/existing-element.js"></script>
</head>
<body>
  <existing-element></existing-element>
</body>

また別のJavaScriptモジュールをインポートするには、コンポーネントのパッケージ名を指定します:

import 'package-name/existing-element.js';

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