Property and Attribute Names
Property names in JavaScript are in camel case while HTML attribute names are in kebab case (dash-separated) to match HTML standards.
For example, a JavaScript property named itemName maps to an HTML attribute named item-name.
Don’t start a property name with these characters.
on(for example,onClick)aria(for example,ariaDescribedby)data(for example,dataProperty)
Don’t use these reserved words for property names.
slotpartis
HTML attributes in a template can't contain uppercase characters. Attribute names can start with:
- A lowercase alphabetic character
- An underscore (
_) - A dollar sign (
$) - An optional hyphen followed by an alphabetic character(
-a)
Attribute names can include duplicate underscores (__) or an underscore followed by a hyphen(_-).
A hyphen followed by an underscore (-_) is allowed if the hyphen isn’t the first character in the attribute name. For example, these are valid attribute names:
_myattribute$myattributemy_-attribute
If you have a JavaScript property that starts with an uppercase character and you want to set it via an HTML attribute, you must use special syntax. The uppercase character of the property name is lowercased and prefixed with a hyphen, -upper. The leading hyphen tells the engine that the first alpha character in the attribute name is declared with a leading uppercase character in the JavaScript class. For example, the JavaScript property @api Upper corresponds to the HTML attribute upper.
Using HTML global attributes, which are attributes like class and title that are common to all HTML elements, isn’t recommended. If you do use a global HTML attribute, decorate it with @api.
Some HTML global attributes don’t follow the Lightning Web Components camel case and kebab case convention. If you create a getter or setter for one of these HTML global attributes, in JavaScript, use the case in this list.
| HTML Global Attribute | Property in 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 |
For example, to access the HTML maxlength attribute of textarea in JavaScript, use maxLength.
Also, to access the for HTML attribute from JavaScript, use htmlFor.
ARIA attributes support assistive technologies. To access these attributes in JavaScript, use camel case. For example, to access aria-checked, use ariaChecked. To access aria-errormessage, use ariaErrorMessage.
See Also