:deep()

在 Vue 3 中，:deep() 是一个样式穿透修饰符，用于在单文件组件（.vue）的 <style> 中修改子组件或第三方组件的内部样式，解决因 CSS 作用域（scoped）导致的样式无法穿透到子组件的问题。

为什么需要 :deep()？

当 <style> 标签添加 scoped 属性时（推荐使用，避免样式污染），Vue 会通过添加唯一属性（如 data-v-xxx）为样式自动增加作用域，确保样式只作用于当前组件的元素。

但这种机制会导致一个问题：当前组件的样式无法影响子组件（或第三方组件）的内部元素。例如，你在父组件中想修改子组件的 .child-class 类，直接写样式会失效，因为子组件的元素没有父组件的 data-v-xxx 属性。

此时就需要 :deep() 来 “穿透” 作用域限制，让样式作用到子组件内部。

基本用法

语法：将需要穿透的选择器包裹在 :deep(...) 中。

<template>
  <div class="parent">
    <!-- 子组件 -->
    <ChildComponent />
  </div>
</template>

<style scoped>
/* 普通样式：只作用于当前组件的 .parent 元素 */
.parent {
  padding: 20px;
}

/* 穿透样式：作用于子组件内部的 .child-class 元素 */
:deep(.child-class) {
  color: red;
  font-size: 16px;
}

/* 复杂选择器：穿透后结合父组件选择器 */
.parent :deep(.child-inner .text) {
  font-weight: bold;
}
</style>

深层理解

它的作用是在保持父组件样式作用域的前提下，有条件地穿透到子组件，而不是让样式变成全局生效。

只移除 “被包裹选择器” 的作用域属性，保留父组件自身的作用域限制。

<style scoped>
:deep(.child-class) {
  color: red;
}
</style>

/* 父组件的唯一属性 + 穿透的子选择器 */
[data - v - abc123].child -
    class {
        color: red;
    };