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

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

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

スクリーンリーダーによって値を音声で読み上げられるようにするには、@api を使用して title 属性を公開します。

属性を公開プロパティとして公開することで制御する場合、デフォルトではその属性は HTML 出力に表示されなくなります。

表示される HTML に値を属性として渡す (プロパティを反映するため) には、プロパティの getter と setter を定義して setAttribute() メソッドをコールします。

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

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

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

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

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

これらの属性を設定および取得するには、setAttribute() および getAttribute() を使用します。

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

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

関連トピック