プロパティ

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

ここではコンポーネントでプロパティを宣言し、そのプロパティを初期化して、コンポーネントのテンプレートで使用します。

初期コード

my-element.js

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  // TODO: `properties`ゲッターをつくり、プロパティの宣言
  // TODO: コンストラクタを追加し、プロパティの初期化
  render() {
    return html`
      <!-- TODO: テキストコンテンツを宣言したプロパティで置換 -->
      <p>Hello world! From my-element</p>
    `;
  }
}
customElements.define('my-element', MyElement);

  1. プロパティの宣言

    propertiesのゲッター設定を下記のコードで置き換えてください:

     static get properties() {
       return {
         // プロパティの宣言
         message: { type: String }
       };
     }
    
  2. プロパティの初期化

    コンポーネントのコンストラクタではプロパティを初期化する必要があります。

    コンストラクタを下記のコードで置き換えてください:

     constructor() {
       // 必ず最初に親クラスのコンストラクタを呼び必要があります
       super();
    
       // プロパティの初期化
       this.message='Hello world! From my-element';
     }
    
  3. JavaScript式でプロパティをテンプレートに追加

    render関数を下記のコードで置き換えてください:

     render() {
       return html`
         <p>${this.message}</p>
       `;
     }
    

LitElementは、プロパティが変更されると自動的に更新されます。

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

my-element.js

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  static get properties() {
    return { message: { type: String } };
  }
  constructor() {
    super();
    this.message='Hello world! From my-element';
  }
  render() {
    return html`
      <p>${this.message}</p>
    `;
  }
}
customElements.define('my-element', MyElement);

次へ: 3. ロジック