November 2017
Beginner to intermediate
398 pages
8h 42m
English
We can scope the CSS contained inside a <style> tag to the current component with the scoped attribute. It means that this CSS will only be applied to the elements of this component's template.
For example, we can use generic class names such as movie and ensure that it won't conflict with the rest of the app:
<style scoped>.movie:not(:last-child) { padding-bottom: 6px; margin-bottom: 6px; border-bottom: solid 1px rgba(0, 0, 0, .1);}</style>
The result will look like this:

This works, thanks to a special attribute applied to both the template and the CSS with PostCSS (a processing tool). For example, consider the following scoped ...
Read now
Unlock full access