Vue: Non-scoped styling in components applied only once when switching routes

[wsw70]

Version

2.4.2

Reproduction link

https://github.com/wsw70/vuejs_bug_report

Steps to reproduce

Vue.js documentation for Scoped CSS mentions that

You can include both scoped and non-scoped styles in the same component

I built the example application for vue-router and used two single file components instead of the string templates of the example - the rendering is as expected.

I then tried to apply both scoped and non-scoped styles in the components. In the first one I have

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

<style>
body {
    background-color: green;
}
</style>

and the second one

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

<style>
body {
    background-color: yellow;
}
</style>

The idea is to have the whole body background switch when choosing a specific route.

The scoped styles are OK - they change depending on the route.

The non-scoped ones do not (screenshots are from Chrome Dev Tools):

• on initial application load (non routed yet) the background is white (which is OK - this is the default one and there is no route for /).
• when choosing a route, the style for the body is applied correctly (say, green from the first component)

• when switching routes and loading the second component the background changes to the new color, it looks like from Chrome Dev Tools that the current style for background-color is overwritten. All the other components elements are correctly rendered (content and scoped styling)

• further switches keep the same background (and again, other elements of the relevant component are rendered correctly). There are no changes in Chrome Dev Tools (the last view above is unchanged)

In other words, it looks like the style is stacked and previously overwritten properties are not updated Is this expected behaviour?

Following a comment on StackOverflow, I tried to style the Vue container (and not body), with the same result

What is expected?

non-scoped styling to be applied to parent, independently on the routing

What is actually happening?

only one styling is taken into account, once it is overwritten it is not reachable anymore

---

This issue was initially asked on StackOverflow

[LinusBorg]

Yes, this is expected. Vue (or rather, webpack) does not insert and remove these styles, as you seem to think. They are injected into the head once the component renders, and never removed.

A common pattern is to extarct all CSS into a single .css file in production, which would have the same result.

[wsw70]

[styles] are injected into the head once the component renders, and never removed

@LinusBorg : thank you. I believe it means in my case that:

• initially (no route, no component rendered) nothing was injected
• the first component is rendered on route switch, its style is injected
• the second component is rendered on route switch, its style is injected and overwrites the previous style
• further route switches do not inject anything as each component was already rendered once. The last style used therefore stays as the authoritative one.

I will therefore fallback on binding an outside's div's (container) class to the current component's data

I also updated the SO question with these details (feel free to make an answer there if interested, I will delete mine in that case)