scoped 属性的小知识

 

1、什么是scoped属性

scoped 属性是 style 标签上的一个特殊属性（布尔值）。表示当前style 里的样式只属于当前模块。（作用域、私有化的思想）

 

2、为什么会有这个属性

      关于css的作用域问题，即使是模块化编程下，在对应的模块的js中import css进来，这个css仍然是全局的。导致在css中需要加上对应模块的html的id/class 使用css选择器 保证css的作用域不会变成全局 而被其它模块的css污染。

　　在vue中引入了scoped这个概念，scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式，使用了data-v-hash的方式来使css有了它对应模块的标识，这样写css的时候不需要加太多额外的选择器，方便很多。

 

3、实现原理是什么

Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前的代码:

<style scoped lang="sass">
    .example{
        color:red;
    }
</style>
<template>
    <div class="example">scoped测试案例</div>
</template>

转译后:

.example[data-v-5558831a] {
  color: red;
}
<template>
    <div class="example" data-v-5558831a>scoped测试案例</div>
</template>

既：PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，给css选择器额外添加一个对应的属性选择器，来选择组件中的dom,这种做法使得样式只作用于含有该属性的dom元素(组件内部的dom)。

总结：scoped的渲染规则：

1. 给HTML的dom节点添加一个不重复的data属性(例如: data-v-5558831a)来唯一标识这个dom 元素
2. 在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(例如：[data-v-5558831a])来私有化样式

 

4、根据原理遇到的问题

现在有一个场景：

        在很多项目中，都会出现这么一种情况，即：引用了第三方组件，需要在组件中局部修改第三方组件的样式，而这个组件又设置了scroped属性来防止组件间的样式污染。

 

白话就是说，比如你使用 ant-design-vue 的样式，在demo.vue中使用table组件，并且style上加scoped，在修改table组件里边的样式是不生效的，因为 data-v-hash 只加在子组件的第一层，子组件中其他dom是没有 data-v-hash 这个属性的，而你写在scoped中的样式都会被postcss 添加[data-v-hash ],样式只作用于有data-v-009这个属性的dom无论你权值多高，甚至添加!important，都无法修改子组件中样式的

例子：

//valChange.less(使用了嵌套规则)
#valueSlide{
    .bigSlider .ivu-slider-wrap{
        height: 6px;
    }
    .bigSlider .ivu-slider-bar {
        height: 6px;
    }
    .bigSlider .ivu-slider-button{
        width: 14px;
        height: 14px;
    } 
}

//html部分
<style lang="less" scoped>
    @import "./valChange.less";
</style>
<div class="valid-panel">
    <div class="containerBox">
        <div id="valueSlide" v-bind:style="validStyle">
            <Slider ></Slider>
        </div>
    </div>
</div>

　　也就是我们在style中使用scoped属性会出现下面的情况：

　　HTML部分：

　　CSS部分：

　　从上面的字可以看出，添加了scoped属性的组件，为了达到组件样式模块化，做了两个处理：

• 给HTML的DOM节点加一个不重复data属性(形如：data-v-19fca230)来表示他的唯一性
• 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（[data-v-2311c06a]）来私有化样式

　　 对于当前组件下调用的其他组件，data属性只会添加到第一层HTML中：

　　对于我们想覆盖的样式则无法起到作用：（在浏览器调试中手动添加 [data-v-19fca230] 属性后可以匹配）

 

总结问题：

1. 父组件无scoped属性，子组件带有scoped，父组件是无法操作子组件的样式的（原因在原理中可知），虽然我们可以在全局中通过该类标签的标签选择器设置样式，但会影响到其他组件
2. 父组件有scoped属性，子组件无，父组件也无法设置子组件样式，因为父组件的所有标签都会带有data-v-hash 唯一标志，但子组件不会带有这个唯一标志属性，与1同理，虽然我们可以在全局中通过该类标签的标签选择器设置样式，但会影响到其他组件
3. 父子组建都有，同理也无法设置样式，更改起来增加代码量

因此如果组件内部还有组件，只会给最外层的组件里的标签加上唯一属性字段，不影响组件内部引用的组件（ 注意 ）
 

5、怎么解决。

1、使用scroped+scoped穿透

需要在局部组件中修改第三方组件库的样式，又不想去除scoped属性从而造成组件之间的样式覆盖。这时可以通过特殊的方式穿透scoped。

stylus的样式穿透 使用>>>

    外层 >>> 第三方组件 
        样式
        
   .wrapper >>> .swiper-pagination-bullet-active
    background: #fff

sass和less的样式穿透 使用/deep/

    外层 /deep/ 第三方组件 {
        样式
    }
    .wrapper /deep/ .swiper-pagination-bullet-active{
      background: #fff;
    }

在父组件写css时，样式选择器中加上 /deep/或者 >>> 这两个标记，即可渗透到子组件的样式中。

如果是想彻底改变第三方组件内的某个样式，可以这样设置：

父组件：

子组件：

效果：

这样的写法及修改了子组件的样式，又不会污染全局样式！

 

2、使用两个style标签。

       如果通过这种方式直接引入其他样式

<style lang="less">
    @import "./test.less";
</style>

　　引进样式，不使用scoped ，"./test.less" 中的其他类名样式可能会污染全局

       如果使用两个style标签

<style lang="less" scoped>
    @import "./test.less";
</style>
<style lang="less">
    //你的覆盖样式
</style>

这样既覆盖了样式，其他样式不会被覆盖到全局

 

 

参考：

Vue中的scoped和scoped穿透（思否）

vue中的css作用域、vue中的scoped坑点（博客园）

理解Vue中的scoped实现原理及穿透方法（思否）