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

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

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

{element}.template.querySelector を使用することもできます。

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

  • 要素の順序は保証されません。
  • DOM に表示されない要素は、querySelector の結果で返されません。
  • querySelector で ID セレクターは使用しないでください。HTML テンプレートに定義した ID は、テンプレートの表示時にグローバルに一意な値に変換される場合があります。JavaScript の ID セレクターを使用する場合、その ID は、変換された ID に一致しません。
  • Light DOM コンポーネントの場合、this.querySelector() は、Light DOM の子など、即時テンプレート外の要素を検索します。より限定的なセレクターを使用して、メソッドの範囲を絞り込んでください。
  • Lightning Locker が有効になっている組織でコンポーネントが実行される場合、潜在的なメモリリークに注意してください。可能であれば、組織で Lightning Web セキュリティを有効化します。または、querySelector の代わりに refs を使用することを検討してください。

DOM 要素のクエリでグローバルプロパティの windowdocument は使用しないでください。「DOM のアクセスコンテインメント」を参照してください。また、lightning/platformResourceLoader 経由でサードパーティライブラリを操作していない場合には、JavaScript を使用して DOM を操作することはお勧めできません。宣言コードを記述するときは、Lightning Web コンポーネントの HTML ディレクティブを使用した方がよいでしょう。

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:eachiterator:* ループの内に lwc:ref を置くと、テンプレートコンパイラーでエラーが発生します。

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

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

関連トピック