vue组件的style标签里的scoped属性是什么作用？

<style lang="css" scoped>
.container {
  color: red
}
</style>

开发一个项目会有多个css样式，全局的局部的，组件内的……各个组件之间可能会存在选择器重名的问题，一不小心可能会导致样式污染而使得项目的表现出现问题。而“scoped”这个属性就是为了使样式私有化，不至于让当前组件的css样式对全局造成污染。

scoped修饰的style只给当前组件的元素使用，是如何实现的呢？

原理是给渲染后的DOM元素增加一个唯一标志，类似于“data-v-123lsdfast23”，在css选择器上也有一个对应的相同标志，间接提升了样式的权重，使得样式更不容易被覆盖。

但是，这也会产生一些麻烦，scoped属性标志只能作用于DOM元素的最外层标签，所以父组件的样式不会渗透到子组件中去，可以使用scoped穿透来解决这个问题：

/* 写法一，container为外层属性选择器名称，没有也可以不加 */
.container /deep/ .button {
    color: red;
}

/* 写法二，可用于stylus */

.container >>> .button { color: red; }

还学习到一种方案是将全局属性和局部属性分开处理，即：

<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>

另外，动态生成的DOM类名可能在scoped中也不会有作用，这时可添加 /deep/ 来让样式生效。