CSS: Styling a pseudo element of a part of a web component

Question

I have a custom web component, a dialog (very simplified version below), which has a part, the part has the pseudo element. Bascially within the custom webcomponent is a <dialog part="dialog">, how to style from the dialog's backdrop, e.g. wc-dialog::part(dialog)::backdrop {...} and wc-dialog::part(dialog::backdrop) { ...}both dont work

Ps I know one could use a CSS custom property, but that would be trying to solve just this minimum reproducible problem, and not the actual issue, or a psuedo part of a custom web component part.

class Component extends HTMLElement {
  constructor() {
    super().attachShadow({
      mode: 'open'
    });
    const template = document.getElementById("TEMPLATE");
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    this.showModal = () => {
      this.shadowRoot.querySelector('dialog').showModal()
    }
  }
}
window.customElements.define('wc-dialog', Component);

wc-dialog::part(dialog) {
  background-color: blue;
  color: yellow;
}

wc-dialog::part(dialog)::backdrop {
  background-color: red;
}

wc-dialog::part(dialog::backdrop) {
  background-color: lime;
}

<template id="TEMPLATE">
<style>
dialog::backdrop {
  /* background-color: fuchsia; this works but does not allow customisation */
}
</style>
<dialog part="dialog">
    <slot>
    </slot>
</dialog>
</template>

<button type="button" onclick="DIALOG.showModal()">Show Modal</button>
<wc-dialog id="DIALOG">Custom Dialog</wc-dialog>