プロパティ名と属性名
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 グローバル属性とは、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
を使用します。
関連トピック