<!-- App.vue -->
<style scoped>
.btn /deep/ strong {
color: green;
border: 1px solid green;
padding: 10px;
}
</style>
这个时候 v-html 中的 strong 样式生效了，如下图所示：
话又说回来，虽然 >>> 或 /deep/ 可以帮助我们穿透已封装好的组件中的样式，但这也失去了组件封装的效果。再次回到以前CSS中令人头痛的问题： CSS作用域 。
简单的小结一下，在Vue中 scoped 属性的渲染规则：
给DOM节点添加一个不重复的 data 属性（比如 data-v-7ba5bd90 ）来表示他的唯一性
在每个CSS选择器末尾（编译后生成的CSS）加一个当前组件的 data 属性选择器（如 [data-v-7ba5bd90] ）来私有化样式。选择器末尾的 data 属性和其对应的DOM中的 data 属性相匹配
如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的 data 属性
上面我们看到的是Vue机制内作用域CSS的使用。在Vue中，除了作用域CSS之外，还有另外一种机制，那就是 CSS Modules ，即 模块化CSS 。
CSS Modules
CSS Modules的流行起源于React社区，它获得了社区的迅速的采用。Vue更甚之，其强大，简便的特性在加上Vue-cli对其开箱即用的支持，将其发展到另一个高度。
在Vue中使用CSS Modules和作用域CSS同样的简单。和作用域CSS类似，在 <style> 标签中添加 module 属性。比如像下面这样：
<style module>
.btn {
color: red;
}
</style>
然后在 <template> 里这样写：
<template>
<button :class="$style.btn">{{msg}}</button>
</template>
这个时候编译出来的效果如下：
正如上图所示， :class="$style.btn" 会被 vue-template-compiler 编译成为 .Button_btn_3ykLd 这个类名，并且样式的选择器也自动发生了相应的变化。