AnswerBun.com

How do I get the Html Element (or Locker API SecureElement) for a child LWC component?

Salesforce Asked by Jason Clark on January 4, 2022

In an LWC component, this.template.querySelector() appears to return an Element (or probably SecureElement) for standard HTML elements, but something else for child components. For example:

this.template.querySelector('div').scrollIntoView();

This will find the first div and correctly scroll it into view. On the other hand:

this.template.querySelector('c-child').scrollIntoView();

does not work. I can verify that this.template.querySelector('c-child') is indeed returning an object that represents the first c-child custom LWC component, and the call to scrollIntoView() does not return an error, but the display does not move. I assume that the object return is not the SecureElement representing the <c-child> node in my <template>.

I am able to get the desired behavior by adding a public api method to c-child:

@api
scrollToHere() {
    this.template.querySelector('div').scrollIntoView();
}

and calling it from the parent, e.g.,

this.template.querySelector('c-child').scrollToHere();

But this seems unnecessary since there should be a element in the DOM to represent the <c-child> element, but either .querySelector('c-child') doesn’t return that element, or LWC elements don’t support standard SecureElement methods such as .scrollIntoView(). I tried a few variations such as this.template.querySelector('c-child').element.scrollIntoView(); without success.

Add your own answers!

Related Questions

How to get data from dataevents using REST API

1  Asked on January 28, 2021 by user87438

   

Scroll down is not working report

1  Asked on January 26, 2021 by dearbrother

   

Wave Analytics — containerId/versionId of a dataset

2  Asked on January 26, 2021 by sitansu-pradhan

 

Connected App packaging

0  Asked on January 25, 2021 by user85767

 

AMPSCRIPT: Hide HTML Form after clicking on Submit Button

1  Asked on January 25, 2021 by valarie-simmons

     

Field update before or after creation of an issue

0  Asked on January 23, 2021 by hermann-our

     

How to check multiple occurrences in the child records?

1  Asked on January 21, 2021 by mauforsalesforce

       

Live Agent Credit Card Question – Two Part

1  Asked on January 21, 2021 by stephanie-dorman

 

Ask a Question

Get help from others!

© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP