vue.js - vue - Estilo sin ámbito en componentes aplicado solo una vez cuando se cambian las rutas

vuejs

Question

La documentación de Vue.js para Scoped CSS menciona que

Puede incluir estilos con ámbito y sin ámbito en el mismo componente

Construí la aplicación de ejemplo para vue-router y usé dos componentes de un único archivo en lugar de las plantillas de cadena del ejemplo: la representación es la esperada.

Luego traté de aplicar estilos con y sin ámbito en los componentes. En el primero tengo

<style scoped>
div {
color: white;
background-color: blue;
}
</style>
<style>
body {
background-color: green;
}
</style>

y el segundo

<style scoped>
div {
color: white;
background-color: red;
}
</style>
<style>
body {
background-color: yellow;
}
</style>

La idea es tener el interruptor de fondo de todo el cuerpo al elegir una ruta específica.

Los estilos de scoped están bien, cambian según la ruta.

Los que no tienen alcance no (las capturas de pantalla son de Chrome Dev Tools):

• en la carga de la aplicación inicial (aún no enrutada), el fondo es blanco (lo cual está bien; este es el predeterminado y no hay ruta para / ).
• al elegir una ruta, el estilo del cuerpo se aplica correctamente (por ejemplo, green desde el primer componente)

• cuando se cambian las rutas y se carga el segundo componente, el fondo cambia al nuevo color, parece que desde Chrome Dev Tools se sobrescribe el estilo actual para background-color de background-color . Todos los demás elementos de los componentes se procesan correctamente (estilo de contenido y ámbito)

• otros conmutadores mantienen el mismo fondo (y de nuevo, otros elementos del componente relevante se representan correctamente). No hay cambios en las herramientas de desarrollo de Chrome (la última vista anterior no se modifica)

En otras palabras, parece que el estilo está apilado y las propiedades previamente sobrescritas no están actualizadas ¿Es este comportamiento esperado?

Answer 1

Abrí un informe de error para esto y terminó siendo el comportamiento esperado. El resumen del informe comenta:

Thorsten Lünborg :

Sí, esto es esperado. Vue (o más bien, webpack) no inserta y elimina estos estilos, como parece pensar. Se inyectan en la cabeza una vez que se renderiza el componente, y nunca se eliminan.

Un patrón común es extarct todo CSS en un solo archivo .css en producción, que tendría el mismo resultado.

Mi resumen en el contexto de la pregunta:

• inicialmente (sin ruta, sin componente procesado) no se inyectó nada
• el primer componente se representa en el cambio de ruta, se inyecta su style
• el segundo componente se representa en el cambio de ruta, su style se inyecta y sobrescribe el style anterior
• otros conmutadores de ruta no inyectan nada ya que cada componente ya se procesó una vez. El último style utilizado por lo tanto permanece como el autoritario.

Por lo tanto, recurriré a la vinculación de la clase de body a los data del componente actual