Estoy haciendo una directiva para Vue que permite limitar el número de elementos que se muestran dentro de otro, y he estado un rato volviéndome loco con un asunto.
Resulta que los elementos que tengo que mostrar / ocultar tienen asignada una propiedad display por CSS, y para ocultarlos debía añadir el !important después de la propiedad:
el.childNodes[x].style.display = "none !important";
Bueno, pues esto no estaba funcionando, y ha sido desesperante porque si probaba a cambiar otras propiedades CSS que no estuvieran ya definidas sí funcionaba, por lo que claramente el problema era que no se estaba aplicando el !important.
Por fin encontré la solución, y es que hay que usar la función setProperty y pasar el !important como tercer parámetro:
el.childNodes[x].style.setProperty("display", "none", "important");