打破 Vue scoped 样式隔离

问题

在 Vue 中使用 scoped 样式时，如何让样式作用到子组件或全局范围？

解答

使用深度选择器

Vue 提供了深度选择器来穿透 scoped 样式限制，可以选择子组件中的元素。

Vue 2.x 语法：

<style scoped>
.container /deep/ .child {
  color: red;
}

/* 或使用 ::v-deep */
.container ::v-deep .child {
  color: red;
}
</style>

Vue 3.x 语法：

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

使用全局样式

如果样式需要在多个组件间共享，可以使用不带 scoped 的 <style> 标签。

<style scoped>
/* 局部样式 */
.local-class {
  color: blue;
}
</style>

<style>
/* 全局样式 */
.global-class {
  color: red;
}
</style>

或者在单独的全局样式文件中定义：

// main.js
import './styles/global.css'

使用 :slotted 选择器

针对插槽内容的样式，使用 :slotted 伪类。

<style scoped>
:slotted(.slot-content) {
  color: green;
}
</style>

关键点

• Vue 3 推荐使用 :deep() 代替 /deep/ 和 ::v-deep
• 深度选择器会影响所有子组件，使用时需谨慎避免样式污染
• 全局样式不受 scoped 限制，适合定义通用样式
• :slotted() 只能选择插槽的直接子元素
• 优先保持样式隔离，仅在必要时突破限制