CSS scoped 属性的原理

scoped


一、scoped 是什么?

在 Vue 组件中,为了使样式私有化(模块化),不对全局造成污染,可以在 style 标签上添加 scoped 属性以表示它的只属于当下的模块,局部有效,使样式互不污染。

我们先写一个Home页面

另一个页面测试一下不加scoped,看是否会影响home页面


确实被影响了,在app页面设置字体为红色,home页面字体也变成红色,并且此时也继承app的样式

如果加上scoped的效果呢

此时字体颜色失效,并且组件标签上还多了data-v-的属性

二、实现原理

  1. 给所有组件实例添加了一个唯一不重复的动态属性,给每个标签对应的dom元素添加一个标签属性,data-v-xxx

  2. 每个选择器的最后一个选择器添加一个属性选择器,原先#app,更改后#app[data-v-xx]

如果引用了第三方组件,需要在当前组件中局部修改第三方组件的样式,而又不想去除 scoped 属性造成组件之间的样式污染。此时只能通过穿透 scoped 的方式来解决。

::v-deep

相关推荐
web守墓人41 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
Liudef066 小时前
儿童趣味记忆配对游戏
css·游戏·css3
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试