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.
1 Asked on January 29, 2021 by j-0
2 Asked on January 28, 2021 by samdev
excel javascript lightning lightning aura components lightning experience
1 Asked on January 28, 2021 by user87438
1 Asked on January 28, 2021 by javanoob
1 Asked on January 27, 2021 by shira-freed
1 Asked on January 27, 2021 by shobhit-saxena
0 Asked on January 26, 2021 by ifabiodlc
1 Asked on January 26, 2021 by dearbrother
2 Asked on January 26, 2021 by sitansu-pradhan
1 Asked on January 25, 2021 by user2957592
4 Asked on January 25, 2021 by kd7iwp
1 Asked on January 25, 2021 by valarie-simmons
0 Asked on January 24, 2021 by khushi
1 Asked on January 24, 2021 by walker
2 Asked on January 24, 2021 by zufra
0 Asked on January 23, 2021 by hermann-our
1 Asked on January 23, 2021 by alex-xiong
lightning design system lightning experience lightning web components popover slds
1 Asked on January 21, 2021 by mauforsalesforce
Get help from others!
Recent Answers
Recent Questions
© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP