プロパティ名と属性名
JavaScript 内のプロパティ名はキャメルケースですが、HTML 属性名はケバブケース (ダッシュ区切り) になっており HTML 標準と一致します。
たとえば、itemName という名前の JavaScript プロパティは、item-name という名前の HTML 属性に対応します。
プロパティ名の先頭では、以下の文字列は使用できません。
on(例:onClick)aria(例:ariaDescribedby)data(例:dataProperty)
プロパティ名では、以下の予約語は使用できません。
slotpartis
テンプレート内の HTML 属性には大文字を含めることはできません。属性名は次の値で始めることができます。
- 小文字の英字
- アンダースコア (
_) - ドル記号 (
$) - 英字が後に続く省略可能なハイフン (
-a)
属性名には、重複するアンダースコア (__) やハイフンが後に続くアンダースコア (_-) を含めることができます。
ハイフンが属性名の最初の文字でなければ、アンダースコアが後に続くハイフン (-_) も使用できます。たとえば、以下の属性名を使用できます。
_myattribute$myattributemy_-attribute
大文字で始まる JavaScript プロパティがあり、それを HTML 属性を介して設定する場合、特別な構文を使用する必要があります。プロパティ名の大文字を小文字にし、ハイフンのプレフィックスを付けます (-upper)。先頭のハイフンは、属性名の最初の英字を JavaScript クラス内で先頭の大文字で宣言することをエンジンに指示します。たとえば、@api Upper という名前の JavaScript プロパティは、upper という名前の HTML 属性に対応します。
HTML グローバル属性とは、class や title のようにすべての HTML 要素に共通する属性であり、これらを使用することはお勧めしません。グローバル HTML 属性を使用する場合は、@api でデコレートしてください。
一部の HTML グローバル属性は、Lightning Web Components のキャメルケースとケバブケースの変換に準拠していません。これらの HTML グローバル属性のいずれかに対して getter または setter を作成する場合は、JavaScript で下記のケースを使用してください。
| HTML グローバル属性 | JavaScript のプロパティ |
|---|---|
accesskey | accessKey |
bgcolor | bgColor |
colspan | colSpan |
contenteditable | contentEditable |
crossorigin | crossOrigin |
datetime | dateTime |
for | htmlFor |
formaction | formAction |
ismap | isMap |
maxlength | maxLength |
minlength | minLength |
novalidate | noValidate |
readonly | readOnly |
rowspan | rowSpan |
tabindex | tabIndex |
usemap | useMap |
たとえば、JavaScript で textarea の maxlength HTML 属性にアクセスするには、maxLength を使用します。
また、JavaScript で for HTML 属性にアクセスするには htmlFor を使用します。
ARIA 属性は、支援技術をサポートします。JavaScript でこれらの属性にアクセスするには、キャメルケースを使用してください。たとえば、aria-checked にアクセスするには、ariaChecked を使用します。aria-errormessage にアクセスするには、ariaErrorMessage を使用します。
関連トピック