Vue3中使用深度选择器无效不起作用

不生效的情况

这里我想用深度选择器来改变element菜单组件的下划线样式，使用后发现不生效

<template>
  <el-menu
      mode="horizontal"
      router
      :ellipsis="false"
      background-color="--bg_color"
      text-color="--text_color_1"
  >
    <el-menu-item v-for="route in routes" :index="route.path" :key="route.path">{{ route.meta.title }}</el-menu-item>
  </el-menu>
</template>

<style lang="scss" scoped>
  :deep(.el-menu--horizontal) {
    border-bottom: none;
  }
</style>

解决方法是给这个组件增加一个根元素，然后再使用深度选择器

<template>
  <div class="father">
    <el-menu
        mode="horizontal"
        router
        :ellipsis="false"
        background-color="--bg_color"
        text-color="--text_color_1"
    >
      <el-menu-item v-for="route in routes" :index="route.path" :key="route.path">{{ route.meta.title }}</el-menu-item>
    </el-menu>
  </div>
</template>

<style lang="scss" scoped>
  .father :deep(.el-menu--horizontal) {
      border-bottom: none;
    }
</style>