Parece que al modificar las propiedades CSS de los elementos al usar métodos JS ( CSSStyleSheet , con insertRule o deleteRule , o CSSStyleRule.style.setProperty() ), el CSS subyacente se actualizó, pero la página en sí no refleja los cambios.
Los cambios solo se realizan con algún disparador de reflujo, por ejemplo, después de haber cambiado el atributo del elemento, incluso si no es válido.
Puede estar relacionado con esta pregunta: ¿Cuáles son las condiciones bajo las cuales un navegador volverá a evaluar y volver a aplicar los selectores y estilos CSS?
¿Cuál es la forma recomendada de modificar CSS usando JS? ¿Además de cambiar las cadenas de clase, o una forma pirateada de insertar y eliminar atributos?
Nota: Pruebas en Edge / Chromium
Después de leer su publicación, no estoy seguro si conoce estos simples:
elemento.estilo = cadena de estilo (IE: "display:block; color:red;")
o
elemento.setAttribute('estilo', cadena de estilo)
Estos serán tratados como estilos en línea. Por lo tanto, las propiedades modificadas tendrán prioridad sobre el css externo y el efecto será inmediato.
Ahora bien, ¿es la forma recomendada? Esa es una pregunta difícil, dejaré que otros respondan esta pregunta, no soy realmente un tipo del W3C...