[干货]关于vue3 SFC 范围内 scoped-styles 样式穿透

Posted 2021-09-14 VINCENT

Vue SFC范围内的样式使CSS仅适用于当前组件。在很多情况下，用户通常会遇到这种情况可以改进

Deep Selectors

最初版本的Vue框架，支持 >>> 组合子，以使选择器 “深” 。然而，一些CSS预处理程序(如LESS/SASS)在解析它时遇到了问题，因为这不是一个正式的CSS组合子。

 .Modal >>> .ant-select { color:#f00; }

后来改用/deep/，它曾经是CSS的一个实际添加(甚至是Chrome自带的)，但后来不知什么原因被放弃了。
/deep/ 仅被Vue的SFC编译器用作编译时提示来重写选择器，并在最终的CSS中删除。

.Modal /deep/ .ant-select{ color:#f00; }

再后来，vue第二版，引入了另一个自定义组合子::v-deep，这一次更明确地表示这是一个特定于vue的扩展，并使用伪元素语法，以便任何预处理程序都能够解析它。

.Modal ::v-deep .ant-select{ color:#f00; }

升级到Vue3之后，官方不再支持对>>>和/deep/的支持。
进而改为CSS伪元素的组合符，使用 ::v-deep() 的工作方式。

.Modal :v-deep(.ant-select){ color:#f00; }

当然，
如果你需要显式地针对插槽内容，还可以使用 ::v-sloated() 伪元素。

::v-deep(.bar) {}
// 编译输出:
[v-data-xxxxxxx] .bar {}

::v-slotted(.foo) {}
// 编译输出:
.foo[v-data-xxxxxxx-s] {}

::v-global(.foo) {}
// 编译输出:
.foo {}

---

如果对你有所帮助，请随手点个赞，Coding不易~❤