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实现原理及穿透方法(思否)

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐