Chrome 浏览器的自定义状态伪类

Web 平台上的“自定义”功能越来越多，比如自定义属性（--my-property）、自定义元素（<my-element>）和自定义事件（new CustomEvent('myEvent')）。我们一度甚至还能使用自定义媒体查询 (@media (--my-media))。

但那还没完！有个新的“自定义”功能你可能错过了，因为这篇 Google 发布的 “New in Chrome 90” 文章中并没有提到（公平地说，声明性（declarative） shadow DOM 在这次发布中占尽了风头），但是 Chrome 刚刚增加了对另一个“自定义”功能的支持：自定义状态伪类（:--my-state）。

内置状态

在讨论自定义状态之前，我们先快速查看下内置 HTML 元素定义的内置状态。HTML 标准的 CSS 选择器模块和“伪类”章节指定了许多可以用于匹配不同状态元素的伪类。下面提到的所有伪类都在当今的浏览器中得到了广泛的支持：

用户操作

定位

输入

其他状态

自定义状态

与内置元素类似，自定义元素也可以有不同的状态。使用自定义元素的网页可能想给这些状态设置不同的样式。自定义元素可以通过它的宿主元素的 CSS 类（class 属性）来暴露状态，但这被认为是一种反模式。

Chrome 现在支持将内部状态添加到自定义元素的 API。这些状态通过自定义状态伪类暴露出来。例如：使用 <live-score> 元素的页面可以给这个元素自定义的 --loading 状态声明样式。

live-score {
  /* 元素的默认样式 */
}

live-score:--loading {
  /* 新内容加载时的样式 */
}

让我们给 <labeled-checkbox> 元素添加 --checked 状态

自定义状态伪类规范包含一个完整的代码示例。我将用这个示例解释 API。此功能的 JavaScript 部分位于自定义元素的类定义中。在构造函数中，为自定义元素创建“元素内部”对象，之后可以在 states 内部对象上设置或取消设置自定义状态。

请注意 ElementInternals API 可确保自定义状态在元素外部只读。换句话说，元素外部不能修改自定义元素的内部状态。

class LabeledCheckbox extends HTMLElement {
  constructor() {
    super();

    // 1. 创建“元素内部”对象
    this._internals = this.attachInternals();

    // （其他代码）
  }

  // 2. 设置自定义状态
  set checked(flag) {
    if (flag) {
      this._internals.states.add("--checked");
    } else {
      this._internals.states.delete("--checked");
    }
  }

  // （其他代码）
}

网页现在可以通过同名的自定义伪类来给自定义元素的内部状态设置样式。在我们的例子中，--checked 状态以 :--checked 伪类的形式暴露出来。

labeled-checkbox {
  /* 默认状态下的样式 */
}

labeled-checkbox:--checked {
  /* --checked 状态下的样式 */
}

用 Chrome 浏览器打开这个 demo

此功能尚未成为标准

过去三年来，浏览器厂商一直在讨论如何通过自定义伪类来暴露自定义元素的内部状态。Google 的自定义状态伪类规范目前托管在 WICG 名下，仍然处于一个非官方的状态。该功能由 W3C 技术架构组（TAG）进行设计审查并移交给 CSS 工作组。在 Chrome 的“出货意向”讨论中，Mounir Lamouri 写道：

我们现在需要等待 Firefox 和 Safari 浏览器实现这个功能。对应的补丁已经以文件形式提交到 Mozilla #1588763 和 WebKit #215911，但还没有得到太多关注。