TemplateSelectorの使い方

概要

TemplateSelectorを使うと指定したDOM要素を取得できます。
Lightning web componentでは、DOM要素を取得する際にTemplateSelectorを使用することが推奨されており、windowsやdocumentを使うことは非推奨となっています。

ここでは、TemplateSelectorの使い方を記載します。

内容

html

<template> 
  <div>AAAAA</div> 
  <div>BBBBB</div> 
</template> 

javascript

import { LightningElement } from 'lwc'; 

export default class Example extends LightningElement { 
  renderedCallback() { 
    this.template.querySelector('div'); // return <div>AAAA</div>
    this.template.querySelector('span'); // return null 
    this.template.querySelectorAll('div'); // return [<div>AAAA</div>, <div>BBBB</div>] 
  } 
}

要素がないときはnullを応答する。
querySelectorAllを使うと、ヒットしたタグをすべて応答する。

参考