Beginner LevelVue JS
How does <style scoped> encapsulate CSS styling to a single Vue component?
❓ Interview Prompt: Explain <style scoped> CSS encapsulation, PostCSS attribute hashing (data-v-hash), and scoped selector compilation.
Adding the 'scoped' attribute to a component's '<style scoped>' tag isolates its CSS rules to that specific component.
How PostCSS Implements Scoped CSS:
1
During compilation, Vue generates a unique hash ID for the component (e.g. 'data-v-7ba5e80').
2
Vue attaches this attribute to every HTML element inside the component template.
3
PostCSS rewrites all CSS selectors in the scoped block to append the attribute selector: '.card' becomes '.card[data-v-7ba5e80]', preventing styles from leaking to other components!
Code Implementation Example
html
<template>
<button class="btn">Click</button> <!-- Compiled to <button class="btn" data-v-12345> -->
</template>
<style scoped>
/* Compiled to: .btn[data-v-12345] { background: blue; } */
.btn {
background: blue;
}
</style>💡CSS encapsulation via PostCSS data-v-hash attribute injection in <style scoped>.
🎯 Interview Key Takeaway
<style scoped> appends unique data-v-hash attributes to elements and selectors, preventing CSS leaks.
#CSS#scoped#Encapsulation#Beginner
Back to all Vue JS Questions→