CSS Shadow Parts Selector ::part() does not work in combination with :disabled pseudo-class in Chrome

[Dev89787]

In Chrome, the pseudo-element selector ::part() and additional :disabled pseudo-class does not work properly. This works in Firefox perfectly.

Here is a corresponding code snippet: https://stackoverflow.com/questions/66867011/css-shadow-parts-selector-part-does-not-work-in-combination-with-disabled-p

Only in Firefox the disabled button will have a yellow background.

Is this a Chrome-bug or intended behavior?

[claviska]

This looks like a Chrome bug to me. From the spec:

The ::part() pseudo-element can also take additional pseudo-elements after it, such as x-button::part(label)::before, but never match additional ::part()s.

I can confirm this works in Firefox and Safari. Fiddle for reference: https://jsfiddle.net/7Lpqw2um/

Looks like there's already an open issue on the Chromium bug tracker: https://bugs.chromium.org/p/chromium/issues/detail?id=953648

[justinfagnani]

Since this is a Chrome bug, the issue should be closed here.

[Danny-Engelman]

Documenting this here because most searches end up here.

There is more to this. :disabled also breaks grouped CSS in Chromium, and same goes for :checked

Have added this to the Chromium bug report: https://issues.chromium.org/issues/40623497

<button-hover>
  <template shadowrootmode="open">
    <button part="button_hover">:hover</button>
  </template>
</button-hover>
<style>
  button-hover::part(button_hover):hover {
    outline: 5px dashed green;
  }
  button-hover::part(button_hover):disabled,
  button-hover::part(button_hover):hover {
    background: lightgreen; /* not applied in Chromium, works fine in FireFox */
  }
</style>

[Westbrook]

FYI: I've submitted web-platform-tests/wpt#47440 to hopefully raise the presence of this issue going forward.