The role of scoped in style
The function of scoped:
Make the current component's style not conflict with other components, because it adds unduplicated properties to each component-related selector
//No scoped was addedh1 {
}
//Add scopedh1[data-e543434] {
}Notes:
- 1. After using scoped, the style of the parent component will not penetrate into the child component.
- 2. However, the root node of a child component will be affected by the scoped CSS of its parent component and the scoped CSS of its child component.
- 3. This design is to allow the parent component to adjust the style of the root element of its child component from the perspective of layout.
<style scoped> </style>
If you want the style of the parent component to penetrate into the child component, you can use the *** style to penetrate **
How to write the style penetration of scss: Add::v-deep (if incompatible, add /deep/)
//Plan 1.wrapper ::v-deep .swiper-pagination-bullet {
opacity 1
background-color #fff
}
//Scheme 2.swiper-container /deep/ .swiper-pagination-bullet {
background-color: #f00;
opacity: 1;
}Some styles are invalid after adding scoped attribute in vue
when<style>Tags havescopedWhen the property isCSSOnly act on elements in the current component; usescopedAfter that, the style of the parent component will not penetrate into the child component.
However, the root node of a child component will be subject to its parent component at the same timescoped CSSand subcomponentsscoped CSSThe impact of
1. Mix local and global styles
<style> /* Global Style */ </style> <style scoped> /* Local style */ </style>
2. Depth effect selector (style penetration)
- vue2: >>> or /deep/
- vue3： &:deep(calssName)
For details, please see the official vue documentvue-loader
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.