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?