getter での属性の連動関係の管理

HTML の属性は、JavaScript ではプロパティ割り当てに変換されます。どちらの場合も、割り当ての順序は保証されません。他の属性の存在を確認するには、getter を使用してください。

テンプレートでは getter 参照を使用します。@api getter や、別の @api プロパティの値に依存する @api setter は使用しないでください。

選択された行にチェックマークを表示する datatable コンポーネントがあるとします。互いに連動関係にある rows と selectedRows という 2 つの別々の属性があります。

属性を受け取る順序は保証されないため、getter を使用して連動関係を確認します。

getter と setter を使用することで、公開 API 契約に容易に準拠できます。コンポーネントは、@api のアノテーションが付けられたプロパティの値を変更してはいけません。

何らかの設定がその値と連動している場合 (たとえば、プログラムで要素に対して CSS クラスを付加する場合) には、setter でデータを正規化してください。元の値は getter で返します。getter でデータを正規化することもできます。こうすることで、コンシューマが何も設定していない場合でも、テンプレートは値にアクセスできます。