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

user_15512048 0
Viewed 600

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. Only in Firefox the disabled button will have a yellow background.

customElements.define('my-button', class extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <button disabled part="button">Button in Shadow DOM</button>
    `;
  }
});
my-button::part(button) {
  color: gray;
}

my-button::part(button):disabled {
  background-color: yellow;
}
<my-button></my-button>

Is this a Chrome-bug or intended behavior?

shadow-dom google-chrome css javascript
1 Answers

Per the spec:

The ::part() pseudo-element can take additional pseudo-classes after it, such as x-button::part(label):hover, but never matches the structural pseudo-classes or any other pseudo-classes that match based on tree information rather than local element information.

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.

As :disabled isn't structural, this looks like a Chrome bug. After searching, I found a bug report on the Chromium bug tracker.

user_5674860
Related