vue新手问题，为什么我具名标签内插入的div不变色

1.App.vue 

<template>
  <div>
    <test><template v-slot:test><div>我是测试</div></template></test>
  </div>
  <router-view/>
</template>
<script>
import Test from "./components/tabbar/test";
export default {
  components: {
    Test,
  }
}
</script>
<style>
</style>

2.test.vue

<template>
  <div id="test">
    <slot name="test"></slot>
  </div>
</template>

<script>
export default {
name: "test"
}
</script>

<style scoped>
#test div{
  background-color: red;
  height: 50px;
  width: 50px;
}
</style>

<style scoped>去掉scoped

#test div{
  background-color: red;
  height: 50px;
  width: 50px;
}

改为

div{
  background-color: red;
  height: 50px;
  width: 50px;
}

f12检查一下，看加上了吗，看看是加上了只是不起作用还是就没加上，slot不会给外面再加一层div吗（好久不用都忘了）

使用深度选择器 就可以解决这个问题。

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y