CSS Custom Properties not updating on hover state for dynamically generated elements
This might be a silly question, but I'm facing an issue where CSS custom properties (variables) are not updating as expected on hover for dynamically generated elements. I'm using Vanilla JS to create these elements and applying hover styles through CSS. The hover effect should change the background color using custom properties defined in the `:root`. Here's the relevant code: ```css :root { --main-bg-color: lightblue; --hover-bg-color: lightcoral; } .dynamic-item { background-color: var(--main-bg-color); transition: background-color 0.3s ease; } .dynamic-item:hover { background-color: var(--hover-bg-color); } ``` And in my JavaScript, I am dynamically creating these elements: ```javascript const container = document.getElementById('container'); for (let i = 0; i < 5; i++) { const item = document.createElement('div'); item.className = 'dynamic-item'; item.textContent = `Item ${i + 1}`; container.appendChild(item); } ``` The issue I'm experiencing is that when I hover over the items, it doesn't change the background color as expected. I've verified that the elements are being added to the DOM correctly, but the hover effect only kicks in after I refresh the page. If I inspect the elements, I can see that the styles are applied correctly, but they don't transition until the page is refreshed. I'm using Chrome (latest version) for testing. I've tried adding `force reflow` methods, such as `item.offsetHeight`, before appending to the container, but it didn't help. Is there something I'm missing, or is there a specific interaction with dynamically generated elements that could be causing this issue?