What is scoped CSS?

Scoped CSS is a mechanism in VueJS Single File Components(SFC) that prevents styles from leaking out of the current component and affecting other unintended components on your page. i.e, When a <style> tag has the scoped attribute, its CSS will apply to elements of the current component only. It uses PostCSS to transform scoped css to plain CSS.

Let's take an example usage of scoped css,

<style scoped>
.greeting {
color: green;
}
</style>

<template>
</template>

The above code will be converted to plain CSS,

 <style scoped>
.greeting[data-v-f3f3eg9] {
color: green;
}
</style>

<template>
</template>