In LWC, querySelector classList not working

Question

I created a popup modal that popup a form for user to fill out, this works out well, the modal is originally hidden, then I use querySelector classList to make it show up like this:

    let contactForm = this.template.querySelector('section[data-id="ContactForm"]');
    contactForm.classList.add('slds-fade-in-open');

This part works without problem.

However, when I try to close the form again when the user either click on submit or cancel button, for some reason the same code suddenly don't work anymore:

    let contactForm = this.template.querySelector('section[data-id="ContactForm"]');
    contactForm.classList.remove('slds-fade-in-open');
    console.log(contactForm.classList);

I can confirm the function is being called and the code is ran, here the screenshot of console.log that show 'slds-fade-in-open' is not part of the classList which confirm it was removed in code, yet it's not removed from the DOM.

Also, I tried to immediately do a classList remove when the modal loads and I can confirm it works, so it works when the modal load but doesn't work afterward when the user click on the cancel button?

What am I doing wrong? Is there some mechanic in Salesforce that prevent me from access the DOM after the page has loaded?

Answer 1

I would actually use a getter for this to simplify things.

get contactFormClass(){
  return `slds-your-class ${this.hidden? 'slds-fade-in-open slds-hide' : '' }`
}

And just reference that in your div:

<div class={contactFormClass}/>

Answer 2

I would suggest also adding slds-hide for a good measure, because slds-fade-in-open is not well documented and unless you actually know what it adds I wouldn't try to manipulate it.

In general classList should work, or you can set your classes via property like class={modalClasses}