This content originally appeared on DEV Community and was authored by CodeOzz
Welcome to the first vue academy ! It will be a list of lot of article on vue! I have 2.5 years of experience in this and I can teach a few thing about this !
For this course we will focus on scoped attribute in CSS.
A quick example :
<style>
.toto {
color: blue;
}
</style>
<template>
<div class='toto'> Hi </div>
</template>
Why it's bad
It will work but your class can be used in any other component. So if you change toto class, it can impact other component style (side effect).
If you want to declare general class, you should create a properly file for this.
Solution
The solution to create a class that can be used by only one component is the attribute scoped in <style>.
<style scoped>
.toto {
color: blue;
}
</style>
CSS will be applied to the elements of the current component only. This is similar to the style encapsulation found in Shadow DOM.
How it's work in deep
When you will compile your code, the code above will be equal to
<style>
.toto[data-v-f3f3eg9] {
color: blue;
}
</style>
<template>
<div class='toto' data-v-f3f3eg9> Hi </div>
</template>
As you can see it's very simple & basic but very strong. Vue will inject an attribute on the scoped class and apply this attribute on each element that include the scoped class !.
This content originally appeared on DEV Community and was authored by CodeOzz
CodeOzz | Sciencx (2021-07-03T18:35:09+00:00) Vue Academy #1: Scoped style. Retrieved from https://www.scien.cx/2021/07/03/vue-academy-1-scoped-style/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.