CSS ::part伪选择器在Chrome中的兼容性问题咨询

我近期正在学习自定义元素与Lit JS，尝试使用CSS ::part伪选择器为组件设置样式。该代码在Firefox中可正常显示红色方块，但在Chrome中无效。根据Can I Use的信息，二者应均支持该特性，已复现问题。请问此代码应在Chrome中显示红色方块吗？

代码示例 #

import * as lit from "https://cdn.skypack.dev/lit@2.5.0";

class TTest extends lit.LitElement {
  static styles =  lit.css`
    ::part(test) {
      display: block;
      color: red;
      background-color: red;
      height: 200px;
      width: 200px;
    }
  `
  
  render() {
    return lit.html`
      <div part="test">
      
      </div>
    `
  }
}

customElements.define('t-test', TTest);

环境信息 #

• Firefox版本：108.0.1 (64-bit)
• Chrome版本：108.0.5359.124 (Official Build) (64-bit)
• 操作系统：Arch Linux x86_64 6.1.1-arch1-1

解答 #

你的代码在Chrome中不会显示红色方块，问题出在组件内部错误使用了::part伪选择器。

::part的设计目的是让组件外部的样式穿透Shadow DOM，选中组件内部标注了part属性的元素，它并不适合在组件自身的样式中使用。在组件内部，你应该直接选择目标元素来设置样式。

修正后的代码示例：

import * as lit from "https://cdn.skypack.dev/lit@2.5.0";

class TTest extends lit.LitElement {
  static styles =  lit.css`
    div[part="test"] {
      display: block;
      color: red;
      background-color: red;
      height: 200px;
      width: 200px;
    }
  `
  
  render() {
    return lit.html`
      <div part="test"></div>
    `
  }
}

customElements.define('t-test', TTest);

或者更简洁地使用类选择器：

import * as lit from "https://cdn.skypack.dev/lit@2.5.0";

class TTest extends lit.LitElement {
  static styles =  lit.css`
    .test-block {
      display: block;
      color: red;
      background-color: red;
      height: 200px;
      width: 200px;
    }
  `
  
  render() {
    return lit.html`
      <div class="test-block" part="test"></div>
    `
  }
}

customElements.define('t-test', TTest);

如果需要保留part属性供外部样式修改，外部可以这样编写样式：

t-test::part(test) {
  /* 这里可以覆盖组件内部的样式 */
}

Firefox能生效属于非标准的兼容行为，Chrome遵循规范所以不支持这种错误用法。

内容的提问来源于stack exchange，提问作者brendandeere