vue.js - Non-scoped styling in components applied only once when switching routes -

vue.js documentation scoped css mentions that

you can include both scoped , non-scoped styles in same component

i built example application vue-router , used 2 single file components instead of string templates of example - rendering expected.

i tried apply both scoped , non-scoped styles in components. in first 1 have

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

and second one

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

the idea have whole body background switch when choosing specific route.

the scoped styles ok - change depending on route.

the non-scoped ones not (screenshots chrome dev tools):

• on initial application load (non routed yet) background white (which ok - default 1 , there no route /).
• when choosing route, style body applied correctly (say, green first component)

• when switching routes , loading second component background changes new color, looks chrome dev tools current style background-color overwritten. other components elements correctly rendered (content , scoped styling)

• further switches keep same background (and again, other elements of relevant component rendered correctly). there no changes in chrome dev tools (the last view above unchanged)

in other words, it looks style stacked , overwritten properties not updated expected behaviour?

i opened bug report , ended being expected behaviour. summary report comments:

thorsten lünborg:

yes, expected. vue (or rather, webpack) not insert , remove these styles, seem think. injected head once component renders, , never removed.

a common pattern extarct css single .css file in production, have same result.

my summary in context of question:

• initially (no route, no component rendered) nothing injected
• the first component rendered on route switch, style injected
• the second component rendered on route switch, style injected , overwrites previous style
• further route switches not inject each component rendered once. last style used therefore stays authoritative one.

i therefore fallback on binding body class current component's data