Vue component styles never disappear

Question

Why do Vue Single File Component inline styles that get appended to header once mounted stay there forever? Even when the component is destroyed its styles never disappear.

I need component styles to get removed from header once it is destroyed

Here's the example of what I mean:

Simple playground

1. Component1 is created and the styles from it append to header

2. Component2 is created, Component1 is removed respectively. Styles from the second component append to <header>, but styles from the first one are also still there

Answer 1

Here is an answer from vuejs developer: https://github.com/vuejs/vue/issues/6218#issuecomment-318000174

Basically in production environment all your styles should be placed in one static file using css extraction for better CSS minification and caching. Therefore no styles are removed after adding.