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



From Spring 2023 release you can use the lwc:ref directives to easily reference DOM elements in LWC.


<div lwc:ref="myDiv"></div>



Read my blog post: Access DOM Elements with LWC Refs

Original Answer

You cannot stop that, also it's not recommended to manipulate DOM elements based on id, as the framework replaces custom id to a globally unique id in the page.

So to get the 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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .