Reputation: 31
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?
Upvotes: 3
Views: 1615
Reputation: 12490
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.
Upvotes: 1