コンポーネントをつくる

このドキュメントは作業中です。リリース前の情報であり、変更される可能性があります。

このステップでは、下記の初期コードから基本的なHTMLテンプレートを使ったHTML要素クラスを作ります。

初期コード

my-element.js

/**
 * TODO: LitElementのベースクラスとhtmlヘルパー関数をインポート
 */
import { } from ''; 

/**
 * TODO: LitElementを継承した独自のHTML要素クラスをつくる
 */
class MyElement { }    

/**
 * TODO: HTML要素クラスをブラウザに登録する
 */
customElements.define();

コードエディタを起動 をクリックして編集してください。編集結果をみるには Preview をクリックしてください。

  1. LitElementのベースクラスとhtmlヘルパー関数をインポート

    import文を下記のコードで置き換えてください:

    import { LitElement, html } from 'lit-element';
    
  2. LitElementを継承した独自のHTML要素クラスをつくる

    MyElementのクラス宣言文を下記のコードで置き換えてください:

    class MyElement extends LitElement {
      render() {
        return html`
          <p>Hello world! From my-element</p>
        `;
      }
    }
    

    render関数はコンポーネントのテンプレートとなります。すべてのLitElementコンポーネントにおいてrenderが実装されている必要があります。

  3. HTML要素クラスをブラウザに登録する

    customElements.define()を下記のコードで置き換えてください:

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

このステップの完成したコードはこちらです:

my-element.js

/**
 * TODO: LitElementのベースクラスとhtmlヘルパー関数をインポート
 */
import { } from ''; 

/**
 * TODO: LitElementを継承した独自のHTML要素クラスをつくる
 */
class MyElement { }    

/**
 * TODO: HTML要素クラスをブラウザに登録する
 */
customElements.define();

あなたのコードサンプルは動作しているはずです。 LitElementコンポーネントは、このように単純なHTMLタグを使ってページに追加されます:

<my-element></my-element>

ローカルで開発するための設定については、[LitElementコンポーネントを使用する](/useを参照してください。

次へ: 2. プロパティ