I am using PrimeVue and having problem applying style on components using <style scoped>.

I managed to reduce to this minimal code (unfortunately I didn’t find any cdn for icons, so I cannot create a code snippet):

<template>
  <div id="uppermenu">
      <Button icon="pi pi-bell" aria-label="Save" outlined/>
    </div>
</template>

<script setup lang="ts">
import OverlayBadge from 'primevue/overlaybadge';
</script>

<style scoped>
#uppermenu {
  height: 65px;
  background-color: #041e14;
  text-align: right;
  padding-top: 6px;
  padding-right: 35px;
}

/* This style is applied WITH and WITHOUT 'scoped' tag */
#uppermenu button {
  border: 2px solid red !important;
  margin-left: 20px;
}

/* This style is applied ONLY when removing 'scoped' tag */
#uppermenu button.p-button span.pi {
  font-size: 28px !important;
  color: red !important;
}
</style>

This is the result WITH scoped attribute:

and this is the result WITHOUT scoped attribute:

When I inspect the button WITH the scoped attribute I see this in the styles console:

#uppermenu button[data-v-50a6ef91] {
    border: 2px solid red !important;
    margin-left: 20px;
}

And this is the html generated:

<button data-v-50a6ef91="" class="p-button p-component p-button-icon-only p-button-outlined" type="button" aria-label="Save" data-pc-name="button" data-p-disabled="false" data-pc-section="root" pc1="">
    <span class="p-button-icon pi pi-bell" data-pc-section="icon"></span><span class="p-button-label" data-pc-section="label"> </span>
</button>

As you can see, the data-v-50a6ef91 attribute exists only on <button>.

How can I keep using scoped and apply style on inner html elements?