querySelector APIs Running With Lightning Locker
When Lightning Locker is enabled, components that use element.querySelector
or element.querySelectorAll
APIs to return elements can encounter memory leaks and performance problems with large DOM trees.
For Lightning web components, element
refers to the this.template
prefix. For Aura components, element
refers to the this
prefix.
When the component is removed from the DOM, the memory sometimes isn’t released. Garbage collection doesn’t clear the memory even if you manually invoke garbage collection in DevTools. The browser can use increasing amounts of memory, and potentially crash with an out-of-memory error.
The only workaround for this issue is to enable Lightning Web Security in the org where the component runs. Garbage collection works correctly under LWS.
Alternatively, if you're developing Lightning web components, consider using refs instead of querySelector
.
See Also