在使用scoped遇到的一些问题

场景

在子组件中用到了ele-ui的el-scrollbar（自定义滚动的隐藏组件，官方无文档说明，可以在其他地方搜到使用方法），如图：

(忽略图里的null)

style样式如下：

ele-ui自带样式

此处期望修改为X轴无滚动条，Y轴显示自定义滚动条：

期望效果

直接修改样式

然而直接在子组件里添加代码下方代码，并未生效（子组件style添加了scoped属性）。同时在控制台styles中并未找到对应样式设置。

.el-scrollbar__wrap {
  overflow-y: scroll;
  overflow-x: hidden;
}

然后尝试将此段代码添加到公共样式中，生效。

问题

scoped究竟有何作用？el-scrollbar在子组件里使用，子组件中设置el-scrollbar__wrap的样式却无效？如何解决这个问题？

求解

官方文档，有作用域的 CSS。

• 当

  下面的是子组件Cdiv.vue：

  在不使用深度作用选择器的情况下，About.vue样式可以影响到c-div，却不会影响c-div下面的子元素
  
  在浏览器下查看DOM结构，不难发现scoped设置组件样式私有化，是通过给DOM元素添加对应属性（如data-v-039c5b43），并在对应样式中添加对应属性选择器，由于不同组件之间的属性是不同的，因此可以实现样式私有化控制。
  通过PostCSS对内容进行转换

  将Cdiv.vue中style标签的scoped移除，并添加插槽：

      
        
  about
      
  

  依然没有影响到c-div组件中的子元素
  
  在没有使用深度作用选择器的情况下，属性会添加到样式直接作用的具体元素，无论是子组件的子元素，还是后续动态添加的元素都无法在PostCSS转换的时候被添加对应属性（还不存在），因此scoped对子元素或动态添加的元素无效。深度作用选择器有点像属性委托，将被直接作用到的子元素的的属性委托到其父元素上，如解决方案中修改后的样子：
  
  属性添加到.el-scrollbar上而不是添加到其子元素上