Vue3中::v-deep已废弃，如何定义组件基础样式？

方法1：直接使用全局选择器（Scoped内） #

在scoped样式中直接用*选择器，会自动作用于当前组件内的所有元素（不会污染全局，因为scoped会给元素添加专属属性）：

<style lang="less" scoped>
* {
  font-size: 16px;
  color: #333;
  // 其他基础样式
}
</style>

方法2：使用:scope选择器明确作用域 #

:scope代表当前组件的根作用域，用它配合后代选择器，可以精准作用于组件内所有元素，语义更清晰：

<style lang="less" scoped>
:scope * {
  font-size: 16px;
  line-height: 1.5;
}
</style>

方法3：带选择器的::v-deep（适用于需要穿透到子组件的场景） #

如果你的基础样式需要影响组件内部的子组件，可使用Vue3推荐的带参数::v-deep写法（替代废弃的无参数用法）：

<style lang="less" scoped>
::v-deep * {
  font-size: 16px;
}
</style>

注：如果仅设置当前组件自身元素的样式，前两种方法更合适，无需使用::v-deep。

关键说明 #

原来的无参数::v-deep写法在Vue3中已被废弃，必须搭配具体选择器使用。而针对组件自身的基础样式，其实不需要依赖::v-deep——scoped样式本身会限制作用域在当前组件内，直接使用普通选择器即可生效。

内容的提问来源于stack exchange，提问作者Zelter Ady