In the Chrome browser, there seems to be an issue with the pseudo-element selector ::part() and the :disabled pseudo-class not functioning correctly. Surprisingly, Firefox handles this without any problems.
Take a look at the sample code provided below. You'll notice that only in Firefox, the disabled button showcases a yellow background color.
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 disparity between Chrome and Firefox a bug or simply the intended behavior?