HTML 属性への JavaScript プロパティの反映

公開 JavaScript プロパティを、表示される Lightning Web コンポーネントの HTML で属性として表示するかどうかを制御できます。スクリーンリーダーや他の支援技術は HTML 属性を使用するため、アクセス性の高いコンポーネントを作成する場合はプロパティを属性として表示することが重要です。

すべての HTML 属性は、デフォルトではリアクティブです。コンポーネント HTML で属性値が変更されると、コンポーネントが再表示されます。

属性を公開プロパティとして公開することで属性を制御する場合、デフォルトでは属性は HTML 出力に表示されなくなります。表示される HTML に値を属性として渡す (プロパティを反映するため) には、プロパティの getter と setter を定義して setAttribute() メソッドをコールします。

setter 内で操作を実行することもできます。項目を使用して、計算された値を保持します。

次の例では、title を公開プロパティとして表示しています。タイトルを大文字に変換してから、_privateTitle プロパティを使用してタイトルの計算値を保持します。setter は、setAttribute() をコールしてプロパティの値を HTML 属性に反映します。

JavaScript プロパティが HTML 属性にどのように反映されるかをしっかりと理解するため、同じコードで setAttribute() をコールしない場合を見てみましょう。生成される HTML には title 属性が含まれていません。

値を設定する前に、すでにコンシューマによって設定されているかどうかを確認します。

this.setAttribute() を使用して tabindex を設定すると、次のマークアップが生成されます。

これらの属性を設定するには、setAttribute() を使用します。

  • for
  • aria-activedescendant
  • aria-controls
  • aria-describedby
  • aria-details
  • aria-errormessage
  • aria-flowto
  • aria-labelledby
  • aria-owns

表示される HTML で HTML 属性を非表示にするには、removeAttribute() をコールします。

関連トピック