JavaScript ref を使用して DOM 要素を照会するサンプル

2024年6月23日

環境
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>

lwc:ref ディレクティブを要素に追加し、値を割り当てます。その参照をコールするには、this.refs を使用します。次の例では、<div> 要素に lwc:ref="tDiv" ディレクティブがあり、
実行時、this.refs によって参照され、<div> へのアクセスが行われます。

export default class extends LightningElement {
  renderedCallback() {
    console.log(this.refs.tDiv);
  }
}

存在しない ref に this.refs をコールすると、undefined が返されます。テンプレートに lwc:ref ディレクティブが重複して含まれている場合、
this.refs は最後のディレクティブを参照します。