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?


1 Answer 1


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.

  1. Get it by class query selector.
  2. get it by Data attribute.

Here are the examples for the same.

  1. Class.

    let div = this.template.querySelector('.popup');

  2. 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.