日常问题记录--vue scoped

遇到过一个问题，在一个页面中引用了公共组建，在加有scoped的style上无法修改其样式，去掉是有效果的，scoped：

用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。
查看DOM结构发现：vue通过在DOM结构以及css样式上加唯一不重复的标记，以保证唯一，达到样式私有化模块化的目的。具体的渲染结果是怎样的，通过一个例子来说明。

给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性

在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式

大家都知道css样式有一个优先级的说法，scoped的这一操作，虽然达到了组件样式模块化的目的，但是会造成一种后果：每个样式的权重加重了：理论上我们要去修改这个样式，需要更高的权重去覆盖这个样式。这是增加复杂度的其中一个维度。

通过以上其他文件中的描述，scoped渲染时会给html标签加上data-类似的标记，以保证私有不重复，公共组件存在类的会导致失败（我自己的理解，权重变得复杂原因）。

解决方案：

根据网上提供的文档地址：

https://vue-loader-v14./zh-cn/features/scoped-css.html

找到方案：>>> 符号（只为选择器作用的更深，至此，问题解决！）

(2020-04-16补充：)/deep/ 等同于 >>>

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

<style scoped>.a >>> .b { /* ... */ }</style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。