How to style components nestled with Shadow DOM?

Question

I have 2 nested web components that use Shadow DOM. The first, my-component, only render the second component:

<my-another-component part="my-another-component" />

And the second, my-another-component, renders a native element:

<div part="my-div"></div>

How can I style the div from a component that renders the my-component?

The final result of this last component would be something like:

<style>/* ... */</style>

<my-component>
    #shadow-root
        <my-another-component part="my-another-component">
            #shadow-root
                <div part="my-div"></div>
        </my-another-component>
</my-component>

I tried to use the pseudo-element ::part nestled, but it didn’t work:

my-component::part(my-another-component)::part(my-div) {
    color: blue;
}

customElements.define('my-component',
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById('my-component');

      this.attachShadow({mode: 'open'})
        .appendChild(template.content.cloneNode(true));
    }
  }
);

customElements.define('my-another-component',
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById('my-another-component');

      this.attachShadow({mode: 'open'})
        .appendChild(template.content.cloneNode(true));
    }
  }
);

<style>
  my-component::part(my-another-component) {
    font-weight: bold;
  }
  my-component::part(my-another-component)::part(my-div) {
    color: blue;
  }
</style>
<my-component></my-component>

<template id="my-component">
  <my-another-component part="my-another-component"></my-another-component>
</template>

<template id="my-another-component">
  <div part="my-div">Example</div>
</template>