• Custom State pseudo-classes in Chrome
• Description: š ime Vidas
• The Nuggets translation Project
• Permanent link to this article: github.com/xitu/gold-m…
• Translator: iceytea
• Proofread by: darkyzhou, Chor, Kim Yang

Chrome’s custom state pseudo class

More and more “customize” features are available on Web platforms, such as custom properties (– my-Property), custom elements (< my-Element >), and custom events (new CustomEvent(‘myEvent’)). At one point we were even able to use custom media queries (@media (–my-media)).

But that’s not all! There’s a New “customization” feature that you may have missed because it wasn’t mentioned in this Google “New in Chrome 90” article (and to be fair, the Declarative Shadow DOM took the show), But Chrome has just added support for another “custom” feature: custom state pseudo classes (:–my-state).

Built-in state

Before we discuss custom states, let’s take a quick look at the built-in states defined by built-in HTML elements. The HTML standard CSS selector module and the “pseudo-classes” section specify a number of pseudo-classes that can be used to match elements in different states. All of the pseudo-classes mentioned below are widely supported in today’s browsers:

The user action

positioning

The input

Other states

Note: For brevity, some pseudo classes have been omitted, and the descriptions of some pseudo classes do not include all possible use cases.

Custom state

Like built-in elements, custom elements can have different states. Web pages that use custom elements may want to style these states differently. A custom element can expose its state through the CSS class (class attribute) of its host element, but this is considered an anti-pattern.

Chrome now supports apis for adding internal state to custom elements. These states are exposed through custom state pseudo classes. For example, pages that use a element can declare a custom –loading state for that element.

live-score {
  /* The default style of the element */} live-score:--loading {/* New content loading style */}Copy the code

Let’s give<labeled-checkbox>Element to add--checkedstate

The custom state pseudoclass specification contains a complete code example. I’ll use this example to explain the API. The JavaScript portion of this functionality is in the class definition of the custom element. In the constructor, you create an “inside the element” object for the custom element, after which you can set or unset the custom state on the States inside object.

Note that the ElementInternals API ensures that custom state is read-only outside the element. In other words, the internal state of a custom element cannot be modified outside the element.

class LabeledCheckbox extends HTMLElement {
  constructor() {
    super(a);// 1. Create an "inside element" object
    this._internals = this.attachInternals();

    // (other code)
  }

  // 2. Set the custom status
  set checked(flag) {
    if (flag) {
      this._internals.states.add("--checked");
    } else {
      this._internals.states.delete("--checked"); }}// (other code)
}
Copy the code

Web pages can now style the internal state of custom elements with custom pseudo classes of the same name. In our example, the –checked state is exposed as the :–checked pseudo-class.

labeled-checkbox {
  /* Default style */} image-checkbox :--checked {/* --checked */Copy the code

Open the demo in Chrome

This feature has not yet become standard

For the past three years, browser vendors have been discussing how to expose the internal state of custom elements by customizing pseudo classes. Google’s custom status pseudo class specification is currently hosted under WICG and remains in an unofficial state. This functionality was reviewed by the W3C Technology Architecture Group (TAG) and handed over to the CSS Working Group. In a “shipping intention” discussion for Chrome, Mounir Lamouri writes:

This feature seems to get a lot of support, but as long as it’s not supported by major browsers, Web developers may struggle to benefit from this feature. Hopefully Firefox and Safari will follow suit and implement this feature. Some vendor has to take the lead in implementing this feature. And since there are no foreseeable backward incompatible changes to this feature, it seems safe to wear it.

We now need to wait for Firefox and Safari to implement this feature. The corresponding patch has been submitted as a file to Mozilla #1588763 and WebKit #215911, but it hasn’t received much attention.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.