プロパティ名と属性名

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

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

1// child.js
2import { LightningElement, api } from "lwc";
3
4export default class extends LightningElement {
5  @api itemName;
6}

1<!-- parent.html -->
2<template>
3  <c-child item-name="Child item"></c-child>
4</template>

JavaScript プロパティ名

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

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

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

slot
part
is

HTML 属性名

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

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

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

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

_myattribute
$myattribute
my_-attribute

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

JavaScript での 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 を使用します。

JavaScript での ARIA 属性へのアクセス

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

関連トピック

Public のプロパティ

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。