style 标签属性 scoped 的作用和原理

在vue项目里面经常在页面下面的 style 标签上面加上 scoped 属性，对于这个 scoped 属性的了解做一下介绍。

1、作用

当 style 标签里面有 scoped 属性时，它的css只作用于当前组件中的元素。在单页面项目中可以使组件之间互不污染，实现模块化。

2、原理

通过使用postCss来实现转换，给dom增加一个动态属性，然后css属性也额外添加对应的属性来选择该dom，达到该样式只作用于含有该属性的dom，实现组件样式的模块化。

转换前：

<templete>
	<div class='test'>hillo!</div>
</templete>
<style scoped>
	.test{
    
    color:red;}
</style>

转换后：

<templete>
	<div class='test' data-v-4f795181>hillo!</div>
</templete>
<style scoped>
	.test[data-v-4f795181]{
    
    color:red;}
</style>

转换后的代码可以通过浏览器的控制台检查元素来查看。

3、如何修改有 scoped 属性的样式

我们的项目经常使用第三方组件库，例如 ElementUI；它的样式都用到了 scoped 属性。如果我们需要改变部分页面 ElementUI 的样式我们需要穿透 scoped，一般使用深度选择器 /deep/ 或者 ‘>>>’ 来穿透属性。

修改第三方插件样式：

<style scoped>
	.test /deep/ .el-menu-item {
    
     color:red; }
</style>
//或者
<style scoped>
	.test >>> .el-menu-item {
    
     color:red; }
</style>

如果 /deep/ 报错或者不生效，使用 ::v-deep