Accessing DOM Elements in LWC Without querySelector – A Game-Changer!

With the Spring '23 Release, Salesforce introduced Query DOM Elements with Refs—a powerful new way to access elements in both shadow DOM and light DOM ,LWC without using querySelector().

Previously, developers relied on querySelector() to retrieve elements in the component's template, but refs simplify this process, making LWC templates more efficient and maintainable.

How Refs Work in LWC without querySelector?

Refs allow developers to locate elements without needing a selector and only return elements within a specific template. This provides:

✅ Better Performance – No need to scan the entire DOM.

✅ Cleaner Code – Avoids hardcoded selectors.

✅ More Control – Works seamlessly within the component structure.

Example: Using Refs in LWC

Here’s how you can dynamically show a hidden div using refs:

LWC Template (.html)

<template>

<div lwc:ref="mainDiv" class="slds-hide">

Hello, this is the main heading!!

</div>

</template>

LWC JavaScript (.js)

import { LightningElement } from 'lwc';

export default class extends LightningElement {

connectedCallback() {

setTimeout(() => {

this.refs.mainDiv.classList.remove('slds-hide');

}, 1000);

}

}

Why Use Refs in LWC?

📌 Encapsulation-Friendly – Works within the component scope.

📌 Eliminates Complexity – No more querySelector() for template-bound elements.

📌 Boosts Maintainability – Ref-based querying simplifies LWC development.

Final Thoughts

Salesforce continues to enhance LWC development with modern best practices. By leveraging refs, developers can access and manipulate DOM elements effortlessly, leading to better performance and cleaner code.

👉 Have you tried using refs in LWC yet? Let me know your thoughts in the comments! 🚀