reflectToAttribute

properties内で設定する、reflectToAttributeについてまとめます。

まず、以下のようにカスタムエレメントの属性値にraisedがあります。

<indicator-button raised></indicator-button>

これは、type: Booleanにおいて、raised="true"と同じ意味になります。以下のように属性値を消すとfalseになります。

<indicator-button></indicator-button>

Polymerでは、以下のように設定しています。

            static get properties () {
                return {
                    raised: {
                        type: Boolean,
                        reflectToAttribute: true,
                        value: false,
                        observer: '_calculateElevation'
                    }
                };
            }

            _calculateElevation() {
                this.raised = false;
            }

raisedプロパティに値が渡させれると、observer: '_calculateElevation'として設定している_calculateElevationメソッドが発火して、raisedの値をfalseにします。

さて本題のreflectToAttribute: trueについてですが、公式サイトによると以下のように説明されています。

ある特定のケースにおいては、HTMLの属性値とプロパティ値を同期させておくと便利かもしれません。propertiesオブジェクト内のプロパティにreflectToAttribute: trueを設定することで実現できます。これによって、プロパティに対する監視可能な変更は、同名の属性にシリアライズされます。

※翻訳された滝口さん記事より引用

実際に、プロパティにてreflectToAttribute: trueを指定して、raisedキーにtrueを指定してから、HTMLソースを確認すると以下のようになります。

raisedプロパティがついていることがわかります。

次に、_calculateElevationメソッドによって、this.raised = false;にしてから、HTMLソースを確認すると以下のようになります。

raisedプロパティが無くなっていることがわかります。

次に、reflectToAttribute: falseにしてから、_calculateElevationメソッドの、this.raised = false;を通してHTMLソースを確認すると以下のようになります。

this.raised = false;を設定しているのに、raisedプロパティが消えていないことがわかります。つまり、Polymerで設定した値とHTMLソースが同期されていないことがわかります。

まとめ

reflectToAttributeプロパティをtrueに設定すると、Polymerのプロパティと、HTMLタグの属性値を同期させることが出来るようになります。