Vue3中如何为带作用域的Shadow对象应用CSS样式？

针对你遇到的父组件scoped样式无法作用于自定义组件内部a标签的问题，给出以下几种可行方案：

方案1：修正父组件的选择器匹配 #

你在test.vue中使用了.custom-button类选择器，但自定义组件的标签是<custom-button>，并没有添加对应的class属性，导致选择器无法匹配到目标组件。将类选择器改为标签选择器即可：

<!-- test.vue -->
<template>
  <custom-button></custom-button>
</template>

<style scoped lang="scss">
custom-button {
  :deep(a) {
    outline: 3px red solid;
  }
}
</style>

方案2：适配Vue版本的深度选择器语法 #

不同Vue版本的深度选择器写法有差异：

• Vue3中使用:deep()（你当前的写法本身合规，但需确保选择器匹配组件）
• Vue2中需要使用::v-deep或/deep/：

<!-- Vue2 写法示例 -->
custom-button ::v-deep a {
  outline: 3px red solid;
}

// 或者
custom-button /deep/ a {
  outline: 3px red solid;
}

方案3：直接在自定义组件内部定义样式 #

最直接的方式是在custom-button.vue中直接编写a标签的样式，组件内部的scoped样式可以直接控制自身元素：

<!-- custom-button.vue -->
<template>
   <a href="#">Link</a>
</template>
<script>
export default {
  name: 'custom-button',
};
</script>
<style scoped>
a {
  outline: 3px red solid;
}
</style>

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