scoped底层是通过在DOM节点中添加data-v-xxx,CSS中通过添加[data-v-xxx]属性过滤,提高优先级,来实现样式的私有化。
<template>
<div class="home"></div>
</template>
在什么情况下scoped会添加标记?
scoped在渲染的时候,如果组件内部还有子组件,只会在父组件,以及子组件的根元素加上data-v-xxx属性
这样如果需要给子组件的元素修改样式就不能直接修改了,需要使用到样式穿透
css、stylus写法
>>> .el-input{
}
less写法
/deep/ .el-input{
}
scss写法
::v-deep .el-input{
}
样式穿透原理
scoped后选择器最后默认会加上当前组件的一个标识,比如[data-v-49729759]
用了样式穿透后,在deep之后的选择器最后就不会加上标识。