Cascading priority of global styles in Vue

Since a style tag without a scoped attribute is global in Vue.js, we can write a selector in the child component to style the parent component. Like below (Interactive Demo)

<!-- App.vue -->
<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<!-- HelloWorld.vue -->
<style>
#app {
  background-color: green;
}
</style>

So, whenever there is a HelloWorld component appears in App.vue, the background-color will be green.

On the other hand, we can use scoped style to style current component without affecting its parents or children, and it should make sense that scoped style has a higher priority than global one. So if we add the following lines to App.vue, the background-color will be red.

<!-- App.vue -->
<style scoped>
#app {
  background-color: red;
}
</style>

However, what if we use global style instead of scoped style?

<!-- App.vue -->
<style>
#app {
  background-color: red;
}
</style>

The answer is, the background-color will be green. Styles from children have higher priority than those from parents.

This is both helpful and tricky. You can use this property to override styles of parents based on a child’s appearance.