LitElement > プロパティ メモ

LitElement プロパティ

Properties – LitElement

プロパティの定義

例．

class MyElement extends LitElement {
  // Declare properties
  static get properties() { return {
    prop1: { type: String, reflect: true },
    prop2: { type: Number, reflect: true },
    prop3: { type: Boolean, reflect: true },
    prop4: { type: Array, reflect: true },
    prop5: { type: Object, reflect: true }
  };}

  // Initialize properties
  constructor() {
    super();
    this.prop1 = '';
    this.prop2 = 0;
    this.prop3 = false;
    this.prop4 = [];
    this.prop5 = { };
  }
}

プロパティ定義のオプション

• 1. converter
• 1. type
• 1. attribute
• 1. reflect
• 1. noAccessor
• 1. hasChanged

1. converter

以下のようにプロパティ名にタイプとかを紐づける機能をさす
prop1: { type: String, reflect: true },

2. type

以下の５タイプ

• String
• Number
• Boolean
• Array
• Object

Properties – LitElement - properties - conversion-type

3. attribute

attributeにはいくつかの意味がある。

3.1. attributeを別の名前にする

デフォルトでは、attribute＝プロパティ名を小文字（もしくはプロパティ名そのまま）
attributeを設定した場合には名前を変更する事ができる。

before

myProp: { type: String }`

の場合には、

<my-element myprop='this prop string'></my-element>
 or
<my-element myProp='this prop string'></my-element>

after

myProp: { type: String, attribute: 'my-prop' }`

の場合には、以下となる。

<my-element my-prop='this prop string'></my-element>

3.2. attributeをOFFにする

myProp: { attribute: false }

以下のようにHTMLタグ側で、attributeに値を設定しても、
LitElement側のプロパティには値が渡らない。

<my-element myprop='this prop string'></my-element>

より詳しくはドキュメントを参照
Properties – LitElement - properties - observed-attributes

4. reflect

監視

For example:

// Value of property "myProp" will reflect to attribute "myprop"
myProp: { reflect: true }

5. noAccessor

myProp: { type: Number, noAccessors: true } 

以下のような内部のアクセサが無効になる

// Create custom accessors for myProp
set myProp(value) { this._myProp = Math.floor(value); } 
get myProp() { return this._myProp; }

詳しくはドキュメントを参照
Properties – LitElement - properties#accessors

6. hasChanged

変更前、変更後の値監視
以下、使用例

  static get properties(){ return {
    myProp: {
      type: Number,
      hasChanged(newVal, oldVal) {
        if (newVal > oldVal) {
          console.log(`${newVal} > ${oldVal}. hasChanged: true.`);
          return true;
        }
        else {
          console.log(`${newVal} <= ${oldVal}. hasChanged: false.`);
          return false;
        }
      }
    }};
  }
  

詳しくはドキュメントを参照
Properties – LitElement - properties#haschanged

プロパティを使うとき

Templates – LitElement - bind-properties-to-child-elements

HTMLテキストコンテンツ、属性、ブール属性、プロパティ、およびイベントハンドラのプレースホルダとしてJavaScriptの式を挿入できます。

• 1. Text content: <p>${this.xxx}</p>
• 1. Attribute: <p id="${this.xxx}"></p>
• 1. Boolean attribute: ?checked="${this.xxx}"
• 1. Property: .value="${this.xxx}"
• 1. Event handler: @event="${this.xxx}"

1. text content

html`<div>${this.prop1}</div>`

※タグで囲むのがポイント

2. Bind to an attribute

html`<div id="${this.prop2}"></div>`

3. booleanのBind

booleanプロパティは以下のよう、？をバインドしたい変数の先頭に付与する。

html`<input type="checkbox" ?checked="${this.prop3}">i like pie</input>`

Boolean attributes are added if the expression evaluates to a truthy value, and removed if it evaluates to a falsy value.
式が真の値に評価された場合はブール属性が追加され、偽の値に評価された場合は削除されます。

this.prop3==true の場合は以下と同等

<input type="checkbox" checked >i like pie</input>

this.prop3==false の場合は以下と同等

<input type="checkbox" >i like pie</input>

4. event handler

イベントは＠を付ける。

html`<button @click="${this.clickHandler}">pie?</button>`

イベント実装の例

class MyElement extends LitElement {
  ...
    render() {
    return html`
        html`<button @click="${this.clickHandler}">pie?</button>`
    `;
  }
  
  clickHandler(e) {
    console.log(e.target);
  }
}