How can I style CSS parts using :root?

Question

I have a button web component built that I am trying to style using CSS parts. In my web component below you can see that the button is colored tomato because I have used exportparts and then in my consumer CSS I have styled it using btn-comp::part(btn) { ... }.

However, I would prefer to not have to style it using btn-comp, instead I would like to just use :root to style it like this author does.

For example I should be able to do this:

:root::part(btn) { /* my styles here */ }

But that does not work, it only works when I use the component name. How can I style my CSS parts using :root?

const template = document.createElement('template');
template.innerHTML = `<button part="btn">I should be a green button</button>`;

class BtnComp extends HTMLElement {
  connectedCallback() {
    this.attachShadow({mode: 'open'});
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    
    const button = this.shadowRoot.querySelector("button");
    button.addEventListener("click", () => alert('Clicked'));
  }
}

window.customElements.define('btn-comp', BtnComp);

:root::part(btn) {
  background-color: green !important; /* I want this color to be applied! */
}

btn-comp::part(btn) {
  background-color: tomato;
  color: white;
  padding: 1rem 2rem;
  border: 0;
  cursor: pointer;
}

<btn-comp exportparts="btn" />