Scaling UpLesson 25Free preview

Vue Scoped Styling

This lesson is part of Vue · All levels

Summary

Scoped styling ensures that CSS style only applies to the components where it is written so that there is no collision between the components. Vue applies it by adding specific data attributes to the element and changing the CSS selector to target those attributes. To target the child's component of the mother's style, you can use deep writing.

Key points

Scoped attributes restrict the style to only those components.
Vue adds data attributes to the component elements.
The style on the child component cannot be reached from the parent without a specific syntax.
The writing is used to penetrate the child's component.
Global style remains necessary for application-level elements such as body.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.