CSS Custom Properties implementation guide After JavaScript DOM Manipulation
I'm stuck trying to I'm reviewing some code and I tried several approaches but none seem to work... I'm working on a personal project and I'm working with an scenario where CSS custom properties (variables) are not updating as expected when I manipulate the DOM using JavaScript. I have a simple layout where I set a background color based on a custom property that I define in my CSS: ```css :root { --main-bg-color: #3498db; } .container { background-color: var(--main-bg-color); height: 100vh; } ``` In my JavaScript, I have a button that changes the value of the custom property: ```javascript document.getElementById('changeColor').addEventListener('click', () => { document.documentElement.style.setProperty('--main-bg-color', '#e74c3c'); }); ``` The button works correctly, but the background color of the container does not change immediately. When I inspect the element in the browser, the custom property is updated in the styles, but the background color stays the same until I refresh the page. I have tried adding `requestAnimationFrame` around the color change, but that didn't solve the question. I am using Chrome Version 93.0.4577.82 and have verified this scenario in Firefox with the same outcome. Are there any known issues with CSS variables not reflecting changes immediately after being updated via JavaScript, or is there a specific step I might be missing in the way I'm applying the styles? Any help would be greatly appreciated! This issue appeared after updating to Javascript 3.9. Cheers for any assistance! I'm working with Javascript in a Docker container on macOS.