CSS 阴影部分选择器 ::part() 不能与 Chrome 中的 :disabled 伪类结合使用

如何解决CSS 阴影部分选择器 ::part() 不能与 Chrome 中的 :disabled 伪类结合使用

在 Chrome 中，伪元素选择器 ::part() 和附加的 :disabled 伪类无法正常工作。这在 Firefox 中完美运行。

这是相应的代码片段。只有在 Firefox 中，禁用的按钮才会有黄色背景。

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>

这是 Chrome 错误还是预期行为？

解决方法

Per the spec：

::part() 伪元素可以在其后添加额外的伪类，例如 x-button::part(label):hover，但永远不会匹配结构伪类或任何其他伪类匹配基于树信息而不是本地元素信息。

::part() 伪元素也可以在其后添加额外的伪元素，例如 x-button::part(label)::before，但永远不会匹配额外的 ::part()s。>

由于 :disabled 不是结构性的，这看起来像是 Chrome 错误。搜索后，I found a bug report 在 Chromium 错误跟踪器上。