/deep/在scss中的使用示例

在SCSS中，`/deep/` 这样的语法并不是标准的，而是由 Google 的 Web Components 团队引入的一种 hack，用于在 Shadow DOM 中穿透样式。由于 Shadow DOM 的隔离特性，`/deep/` 被用来访问和修改组件内部的样式，特别是在不支持CSS变量和`:host`选择器的情况下。

举个例子，假设你有这样一个结构的组件：

<template>
  <style>
    :host {
      display: block;
      width: 100px;
      height: 100px;
    }
    
    .inner-box {
      background-color: red;
    }
  </style>
  <div class="outer-box">
    <div class="inner-box">Hello</div>
  </div>
</template>

在这个组件中，`.inner-box`的背景颜色是红色。如果你想要从外部样式表中改变这个颜色，你会使用 `/deep/` 来访问：

:host-context(.outer-box) /deep/ .inner-box {
  background-color: blue;
}

上面的代码会让 `.outer-box` 内部的所有 `.inner-box` 的背景色变为蓝色。尽管这不是一个推荐的实践，但在某些老旧浏览器和缺乏原生 Shadow DOM 支持的时候可能会用到。

然而，随着浏览器的支持逐渐提高，尤其是像 Chrome 和 Firefox 已经内置了 `::shadow` 或 `>>>` 作为替代，`/deep/` 的使用将越来越少。