プロパティ名と属性名

JavaScript 内のプロパティ名はキャメルケースですが、HTML 属性名はケバブケース (ダッシュ区切り) になっており HTML 標準と一致します。

たとえば、itemName という名前の JavaScript プロパティは、item-name という名前の HTML 属性に対応します。

プロパティ名の先頭では、以下の文字列は使用できません。

  • on (例: onClick)
  • aria (例: ariaDescribedby)
  • data (例: dataProperty)

プロパティ名では、以下の予約語は使用できません。

  • slot
  • part
  • is

テンプレート内の HTML 属性には大文字を含めることはできません。属性名は次の値で始めることができます。

  • 小文字の英字
  • アンダースコア (_)
  • ドル記号 ($)
  • 英字が後に続く省略可能なハイフン (-a)

属性名には、重複するアンダースコア (__) やハイフンが後に続くアンダースコア (_-) を含めることができます。

ハイフンが属性名の最初の文字でなければ、アンダースコアが後に続くハイフン (-_) も使用できます。たとえば、以下の属性名を使用できます。

  • _myattribute
  • $myattribute
  • my_-attribute

大文字で始まる JavaScript プロパティがあり、それを HTML 属性を介して設定する場合、特別な構文を使用する必要があります。プロパティ名の大文字を小文字にし、ハイフンのプレフィックスを付けます (-upper)。先頭のハイフンは、属性名の最初の英字を JavaScript クラス内で先頭の大文字で宣言することをエンジンに指示します。たとえば、@api Upper という名前の JavaScript プロパティは、upper という名前の HTML 属性に対応します。

HTML グローバル属性とは、classtitle のようにすべての HTML 要素に共通する属性であり、これらを使用することはお勧めしません。グローバル HTML 属性を使用する場合は、@api でデコレートしてください。

一部の HTML グローバル属性は、Lightning Web Components のキャメルケースとケバブケースの変換に準拠していません。これらの HTML グローバル属性のいずれかに対して getter または setter を作成する場合は、JavaScript で下記のケースを使用してください。

HTML グローバル属性JavaScript のプロパティ
accesskeyaccessKey
bgcolorbgColor
colspancolSpan
contenteditablecontentEditable
crossorigincrossOrigin
datetimedateTime
forhtmlFor
formactionformAction
ismapisMap
maxlengthmaxLength
minlengthminLength
novalidatenoValidate
readonlyreadOnly
rowspanrowSpan
tabindextabIndex
usemapuseMap

たとえば、JavaScript で textareamaxlength HTML 属性にアクセスするには、maxLength を使用します。

また、JavaScript で for HTML 属性にアクセスするには htmlFor を使用します。

ARIA 属性は、支援技術をサポートします。JavaScript でこれらの属性にアクセスするには、キャメルケースを使用してください。たとえば、aria-checked にアクセスするには、ariaChecked を使用します。aria-errormessage にアクセスするには、ariaErrorMessage を使用します。

関連トピック