deep selector for changing background color

I am familiar with this issue because I use Bootstrap-vue for almost all of my projects. If I have to override any of the bootstrap components, I just simply remove the scoped from style. If you need to use scoped and also want to override bootstrap components then you should select its wrapper selector and nest it.

For the first selector, you shouldn't need a deep selector, as the class is added to the root element of the popover, which has the data-v-**** attribute from the scoped tag.

The second one you'll need one, but you need to place it after .my-popover-class. That way your selector will be rendered as .my-popover-class[data-v-****] .popover-body, which should work.

<style scoped>
.my-popover-class {
  background: black !important;
  color: white !important;
}

.my-popover-class >>> .popover-body {
  color: white !important;
  background: black !important;
}
</style>

Example on codesandbox