[css-nesting] ::part():hover nested ::part() { &:hover } don't function the same?

[joezappie]

My understanding is that these two should be technically identical to each other except the nested hover does not seem to work in any browser.

test-button::part(button) {
  &:hover {
    background: blue;
  }
}

test-button::part(button):hover {
  background: blue;
}

Here is a jsfiddle with an example: https://jsfiddle.net/5oczux7d/
If you remove the last test-button::part(button):hover rule it will no longer change to blue.

Reason for wanting this to work

I'm using tailwind to generate an interactive-bg-surface class which uses nested :hover states:

@utility interactive-bg-* {
  background-color: --value(--color- *);

  &:hover {
    background-color: color-mix(in oklch, --value(--color- *), --value(--color-on- *) 8%);
  }
}

Which I then apply to my custom element part:

zy-table::part(row) {
  @apply interactive-bg-surface-container;
}

But since the nested :hover state doesn't work, I have to instead generate the focus bg colors and make a separate rule for it.

zy-table::part(row):hover {
  @apply hover-bg-surface-container;
}