v-deep 打破作用域隔离的原理

vue 中使用 scoped 样式隔离

使用 ::v-deep 和 >>> ，穿透作用域样式，以便在父组件中修改子组件的样式，即打破样式隔离。

vue 使用了一种叫做 scoped css 的技术来隔离组件的样式，确保他们不会泄漏到其他组件中，每个 Vue 组件的样式只在该组件的作用域内生效，不会影响到其他组件，而 v-deep 可以打破这样的样式隔离。

 v-deep 的原理是，vue 渲染是移除这些选择器，从而使得被选中的样式能够影响到子组件内部的元素，这样以来，父组件就可以通过 v-deep 选择器修改子组件的样式，即时他们被包裹到作用域样式中。

原理如下

1. 编译时处理：在 vue 组件的编译过程中，vue 会解析模版中的样式，并将作用域样式转换成一种特殊的选择器，以确保样式仅在当前组件的作用域内生效。这种转换通常涉及到在选择器中添加一个唯一的标识符，例如一个哈希值，以确保样式只影响当前组件内的元素。
    
2. 移除选择器：当遇到v-deep选择器是，vue 在渲染组件时会将这些选择器从样式表中移除，而不是将他们应用到 DOM 上，这意味着，被标记为 v-deep 的选择器在实际渲染时不会起作用，因此不会影响 DOM 结构
3. 实现穿透样式：尽管在渲染时移除了v-deep 选择器，但在生成的样式表中，这些选择器仍然会存在。当浏览器解析 css 样式表时，它会忽略这些特殊选择器，因为它们不符合CSS规范。但是，由于Vue已经在编译时对样式表进行了处理，所以实际上，::v-deep或>>>选择器已经生效了，允许父组件的样式影响到子组件的元素。

4. 修改子组件样式： 因此，通过使用::v-deep或>>>选择器，父组件可以选择子组件中的元素，并修改它们的样式，即使子组件的样式已经被作用域样式所隔离。

总的来说，Vue在编译时处理::v-deep或>>>选择器，移除它们以确保不会影响到实际的DOM结构，但在样式表中仍然保留了这些选择器，使得它们在浏览器解析CSS时可以生效，从而实现了穿透样式的效果。