El estilo en línea sobrescribe reglas CSS basadas en ID

Versión GrapesJS

• Confirmo que uso la última versión de GrapesJS

¿Qué navegador usas?

Chrome v135.0.7049.96

Enlace de demo reproducible

https://jsfiddle.net/bqkLwt8j/

Describe el bicho

Cuando un elemento tiene un estilo en línea y también coincide con una regla CSS basada en ID, los estilos del selector de ID se eliminan, incluso si el estilo en línea no anula esas propiedades. Sin embargo, este problema no ocurre con las reglas CSS basadas en clases, que se comportan como se esperaba.

¿Cómo reproducir el bicho?

1. Añadir una regla CSS para un ID específico, por ejemplo, '#frame2 { color: red; }`
2. Añadir un elemento con ese ID y un estilo en línea, por ejemplo, '<div id="frame" style="font-size: 14px;">'
3. Observa que el color ya no se aplica según la regla CSS, a pesar de no ser anulado.

¿Cuál es el comportamiento esperado? Un estilo en línea solo debe anular propiedades en conflicto que estén explícitamente establecidas en el estilo en línea. Otros estilos (por ejemplo, de selectores basados en ID) deben mantenerse intactos y aplicarse según se espera.

Por ejemplo:

<style>
  #test {
    color: rojo;
    Peso-fuente: negrita;
  }
</style>

<div id="test" style="font-weight: normal;">Hola</div>

El resultado esperado es:

• 'color: rojo' debería seguir aplicándose según la regla basada en ID.
• 'font-weight: normal' debe anular la regla de ID para 'font-weight'.

¿Cuál es el comportamiento actual? El conjunto completo de estilos definidos en el selector de ID (por ejemplo, '#test { ... }') se ignora tan pronto como se añade un estilo en línea, incluso si el estilo en línea no anula ninguna de esas propiedades.

Código de conducta

• Acepto seguir el Código de Conducta de este proyecto