コンポーネントが所有する要素へのアクセス

コンポーネントによって表示された要素に標準の DOM API でアクセスするには、querySelector() と、this.template または this を使用します。セレクタを使わずに DOM 内の要素を探すには、ref を使用します。

DOM で要素へアクセスするための一般的な方法は、querySelector() を使用することです。Shadow DOM ノードを探すには、this.template の querySelector() または querySelectorAll() を使用します。Light DOM ノードの場合は、this でいずれかのメソッドを使用します。

コンポーネントが表示した要素を探すには、これらのメソッドを使用します。

• 要素の順序は保証されません。
• DOM に表示されない要素は、querySelector の結果で返されません。
• querySelector で ID セレクタは使用しないでください。HTML テンプレートに定義した ID は、テンプレートの表示時にグローバルに一意な値に変換される場合があります。JavaScript の ID セレクタを使用する場合、その ID は、変換された ID に一致しません。
• Light DOM コンポーネントの場合、this.querySelector() は、Light DOM の子など、即時テンプレート外の要素を検索します。より限定的なセレクタを使用して、メソッドの範囲を絞り込んでください。

ref は、セレクタなしで DOM 要素を見つけ、指定されたテンプレートに含まれる要素のみを照会します。まず、lwc:ref ディレクティブを要素に追加し、値を割り当てます。その参照をコールするには、this.refs を使用します。次の例では、<div> 要素に lwc:ref="myDiv" ディレクティブがあり、実行時、this.refs によって参照され、<div> へのアクセスが行われます。

this.refs をコールするには、あらかじめディレクティブ lwc:ref を定義しておく必要があります。存在しない ref に this.refs をコールすると、undefined が返されます。テンプレートに lwc:ref ディレクティブが重複して含まれている場合、this.refs は最後の <div> を参照します。

this.refs は、参照のみのプレーンなオブジェクトです。そのコンポーネントの内部でプロパティを追加、変更、または削除しようとすると、ランタイムエラーが発生します。キーは文字列で、値は DOM 要素です。this.refs の構文は、Light DOM や Shadow DOM の要素を参照する場合と同じです。

ref は設定と書き込みが可能であるため、コンポーネントで定義された ref は LightningElement.prototype の ref を上書きします。

<template> 要素や、Light DOM の <slot> 要素に lwc:ref を適用することはできません。

for:each や iterator:* ループの内に lwc:ref を置くと、テンプレートコンパイラでエラーが発生します。

this.refs は、複数テンプレートのコンポーネントでは、最後に表示されたテンプレートを参照します。テンプレートが変更されると、this.refs オブジェクトも変更されます。

<template lwc:if={boolean}> に基づいて要素を条件付きで定義するには、1 つの親テンプレートの下に複数の子テンプレートを作成します。この例では、this.refs.toggleDarkMode は、表示された子テンプレートの中の要素を参照します。

関連トピック

• Light DOM