Id attribute of an element gets changed in LWC

Question

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!

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