Style not updating in UXP panel when classList changed

Premiere Pro
1

Simple example of the issue here. I have an input element I want to change style based on input in another element. I have a class style defined in CSS and have added an event listener to the input event of the element (because the change event doesn’t appear to fire… another issue for another time).

This example works as expected in jsFiddle. Every time I enter another character in styleInput, the style of styleInput2 changes.

However, in Premiere Pro, it only changes the first time. After that, the style doesn’t update no matter how many times the input event is fired. Here’s my HTML/CSS/JS. Tried to simplify and isolate the issue as much as I could:

<!DOCTYPE html>
<html>
  <head>
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h4 id="plugin-heading">Style Test</h4>
    <div class="main-div">
      <input name="styleInput" id="styleInput"/>
      <input name="styleInput2" id="styleInput2" value="TEST"/>
    </div>
  </body>
</html>

.invalid {
  color: rgb(255, 0, 0);
}

document
  .querySelector("#styleInput")
  .addEventListener("input", toggleInvalid);

function toggleInvalid() {

  const input = document.getElementById("styleInput2");

  //Write to console to verify that class list is being successfully modified
  console.log(input.outerHTML);

  //Yes, I have tried classList.toggle here, too.
  if(input.classList.contains("invalid")){
    input.classList.remove("invalid");
  } else {    
    input.classList.add("invalid");
  }
}