JavaScript ref を使用して DOM 要素を照会するサンプル
環境
Windows 11Pro 64bit
Google Chrome 126.0.6478.115（Official Build） （64 ビット）
概要
ref を使用して、Shadow DOM と Light DOM の要素にアクセスできるようになりました。
ref は、セレクターを使わずに DOM 要素を見つけ、指定されたテンプレートに含まれる要素のみを照会します。
これまで、特定の DOM 要素を見つけるには querySelector() しか使用できませんでした。
使用例
<template>
<div lwc:ref="tDiv"></div>
</template>
<template>
<div lwc:ref="tDiv"></div>
</template>
<template>
<div lwc:ref="tDiv"></div>
</template>
lwc:ref ディレクティブを要素に追加し、値を割り当てます。その参照をコールするには、this.refs を使用します。次の例では、<div> 要素に lwc:ref="tDiv" ディレクティブがあり、
実行時、this.refs によって参照され、<div> へのアクセスが行われます。
export default class extends LightningElement {
renderedCallback() {
console.log(this.refs.tDiv);
}
}
export default class extends LightningElement {
renderedCallback() {
console.log(this.refs.tDiv);
}
}
export default class extends LightningElement {
renderedCallback() {
console.log(this.refs.tDiv);
}
}
存在しない ref に this.refs をコールすると、undefined が返されます。テンプレートに lwc:ref ディレクティブが重複して含まれている場合、
this.refs は最後のディレクティブを参照します。