[譯] Chrome 瀏覽器的自定義狀態僞類

• 原文地址：Custom State Pseudo-Classes in Chrome
• 原文做者：Šime Vidas
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：iceytea
• 校對者：darkyzhou、Chor、Kim Yang

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 選擇器模塊和「僞類」章節指定了許多能夠用於匹配不一樣狀態元素的僞類。下面提到的全部僞類都在當今的瀏覽器中獲得了普遍的支持：

用戶操做

類型	描述
:hover	鼠標光標懸停在元素上
:active	該元素被用戶激活
:focus	該元素得到焦點
:focus-within	該元素或者後代元素得到焦點

定位

類型	描述
:visited	該連接以前被用戶訪問過
:target	該元素被頁面的 URL 片斷指定

輸入

類型	描述
:disabled	表單元素被禁用
:placeholder-shown	input 元素正在展現 placeholder 文本
:checked	複選框或單選按鈕被選中
:invalid	表單元素的值不合法
:out-of-range	input 元素的值超出指定範圍
:-webkit-autofill	input 元素的值被瀏覽器自動填充

其餘狀態

類型	描述
:defined	該自定義元素已被註冊

注： 爲簡潔起見，有些僞類被省略了，而且有些僞類的描述沒有包括全部可能的用例。

自定義狀態

與內置元素相似，自定義元素也能夠有不一樣的狀態。使用自定義元素的網頁可能想給這些狀態設置不一樣的樣式。自定義元素能夠經過它的宿主元素的 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 寫道：

此功能看起來獲得了許多支持它的聲音，可是隻要它沒有被各大瀏覽器支持，Web 開發者可能都難以今後功能中獲益。但願 Firefox 和 Safari 可以跟進並實現此功能。總得有廠商帶頭實現這個功能。並且，鑑於這個功能不存在可預見的一些向後不兼容的改變，要帶這個頭看上去挺安全的。

咱們如今須要等待 Firefox 和 Safari 瀏覽器實現這個功能。對應的補丁已經以文件形式提交到 Mozilla #1588763 和 WebKit #215911，但尚未獲得太多關注。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。