对于vue的组件化开发，存在组件的style样式添加了scoped属性，可以防止父组件的样式渗透。
<style scoped>
当 <style> 标签带有 scoped attribute 的时候，它的 CSS 只会应用到当前组件的元素上。这类似于 Shadow DOM 中的样式封装。它带有一些注意事项，不过好处是不需要任何的 polyfill。它是通过 PostCSS 转换以下内容来实现的：
子组件的根元素
在带有 scoped 的时候，父组件的样式将不会泄露到子组件当中。不过，子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这是有意为之的，这样父组件就可以设置子组件根节点的样式，以达到调整布局的目的。
深度选择器---样式穿透
处于 scoped 样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用 :deep() 这个伪类：
图1.1
图1.1的样式会被编译成如下：
图1.2
TIP：通过 v-html 创建的 DOM 内容不会被作用域样式影响，但你仍然可以使用深度选择器来设置其样式。
当然样式穿透的方式有三种：>>> 和 :deep(选择器) 和 /deep/
