I have defined an element in LWC as
<div class="popup" id="contactpopup"></div>
but it renders as:
<div class="popup" id="contactpopup-10"></div>
any random number is attached to the id attribute. How can I stop this?
Thanks!
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It only takes a minute to sign up.
Sign up to join this communityI have defined an element in LWC as
<div class="popup" id="contactpopup"></div>
but it renders as:
<div class="popup" id="contactpopup-10"></div>
any random number is attached to the id attribute. How can I stop this?
Thanks!
You cannot stop that, also it's not recommended to manipulate DOM elements based on id
, as the framework replaces custom id to globally unique id in the page.
So to get element you have two options.
Here are the examples for the same.
Class.
let div = this.template.querySelector('.popup');
Using the data attribute.
Define the data attribute.
<a onclick={disableAccountEdit} data-id="contactpopup">sample</a>
Get the data attribute in JS
this.template.querySelector('[data-id="contactpopup"]'));// gets DOM element with matching 'id' value