deep selector to inner class of BPopover does not work

[fifzteen]

Describe the bug.
deep selector to inner class of BPopover does not work

To Reproduce.

see stackblitz

<script setup>
import { ref } from 'vue';

const value = ref('');
</script>

<template>
  <b-form-input id="input-outer" v-model="value" />
  <b-popover
    target="input-outer"
    v-bind:triggers="['click']"
    custom-class="custom-tip"
  >
    <b-form-input v-model="value" />
  </b-popover>
</template>

<style lang="scss" scoped>
.custom-tip {
  // doesn't work!
  :deep(.popover-body) {
    background-color: #aaaaaa;
    border-color: #aaaaaa;
    border-radius: inherit;
  }

  :deep(.popover-arrow) {
    &::before,
    &::after {
      border-top-color: #aaaaaa;
    }
  }
}
</style>

Screenshots.

data-v-{hash:8} attribute is not on BPopover.

If add data-v-{hash:8} attribute to popover element, it works as expected.

Environment (please complete the following information):

• OS: macOS 12.6.5
• Package Version: 0.10.8

Additional context.

I'm trying the issue I posted on BootstrapVue repository below is resolved on BootstrapVueNext.

bootstrap-vue/bootstrap-vue#7151

1 and 3 are works fine!
If 2 (this issue) also resolved, I will use BootstrapVueNext on my product.

[xvaara]

Deep selectors don't work on multiroot node components like popover. It's as intended.

You need to use a wrapper for the popover to have the class correctly: https://stackblitz.com/edit/vitejs-vite-3tw7zd?file=src%2FApp.vue