style scoped属性的作用和原理、scoped穿透

官方文档：https://cn.vuejs.org/api/sfc-css-features.html

作用：实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。
原理：scoped会在DOM结构及css样式上加上唯一性的标记【data-v-something】属性，即CSS带属性选择器，以此完成类似作用域的选择方式，从而达到样式私有化，不污染全局的作用。

<style scoped>
.example {
 color: red;
}
</style>

<template>
 <div class="example">hi</div>
</template>

转换为：

<style>
.example[data-v-f3f3eg9] {
 color: red;
}
</style>

<template>
 <div class="example" data-v-f3f3eg9>hi</div>
</template>

使用 scoped 后，父组件的样式将不会渗透到子组件中。不过，子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

但是在项目中往往需要修改公共组件（三方库或者项目定制的组件）的样式的时候，scoped往往会造成更多的困难，需要增加额外的复杂度。
以TDesign组件为例，在使用scoped会出现 CSS 设置不起效的问题，无法通过 CSS 修改组件的样式。可以使用下面的方法来解决。

1. 使用使用 sass 或 less 的样式穿透 //deep// 。

   /deep/.t-input--focused {
               box-shadow: none;
             }
   

2. 使用 >>> 可以穿透 scoped 属性，修改其他第三方组件的样式。

   外层 >>> 第三方组件{}
   

3. 使用两个 style 标签，一个带 scoped 属性，一个不带 scoped 属性，用来修改第三方组件的样式。