样式穿透原理及写法

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之后的选择器最后就不会加上标识。