[css-pseudo-4] Add a pseudo-element to style all highlight pseudo-elements

[dbaron]

A proposal I made during the discussion in #6641 (comment) is that, given the model proposed in #6641 for how custom properties work on highlight pseudo-elements, is that we should have a pseudo-element that matches all of the highlight pseudo elements. (This means both the Higlight Pseudos and Custom Highlight Pseudos.)

This is a slightly new concept because it means that when an implementation resolves the ::selection pseudo-element (for example), it needs to look at selectors involving ::selection and also the selectiors involving this new pseudo-element. Or, to think about it another way, this is sort of like a pseudo-element alias. That said, I think that still seems like a relatively straightforward feature.

This feature would make it easier for authors who are changing custom properties in a subtree to make sure that those custom properties will work correctly across all the highlight pseudo-elements, without needing to know exactly which highlight pseudo-elements will use the custom properties that they're modifying.

[dbaron]

Two possible names for such a pseudo-element might be ::all-highlights or ::any-highlight, though I'm sure there are other options.

[fantasai]

Naming-wise it should be ::any-highlight rather than ::all-highlights, for consistency with ::any-link.

However, I'm not convinced this is a good idea. It makes sense for custom properties, but as far as non-custom properties go, it's highly unlikely that the author should be styling all the UA-defined highlights (including ones we haven't defined yet) in the same way.

Having ::highlight() match all custom highlights would make sense, though.

[bramus]

(#) This feature would make it easier for authors who are changing custom properties in a subtree to make sure that those custom properties will work correctly across all the highlight pseudo-elements, without needing to know exactly which highlight pseudo-elements will use the custom properties that they're modifying.

In #9909 (comment) I came to the suggestion to have all custom-pseudos inherit their custom properties from their originating element.

I’m not sure what the performance implications would be there, but it would solve the core problem once and for all.

(#) Having ::highlight() match all custom highlights would make sense, though.

For View Transitions we use * to denote “any of these”. I think it would make sense to use the same pattern for ::highlight() as well – i.e. ::highlight(*).

We would also need to adopt to specificity calculation rules as well:

• * = Add 0,0,0
• Not * = Add 0,0,1

[LeaVerou]

As @tabatkins mentioned in #6641 (comment) this is a much broader issue than highlights. The real author need here is to be able to define document-wide custom property values that are available everywhere.

I think instead of introducing more ad-hoc pseudo-elements, we should introduce a pseudo-element or @rule that allows this. Or adopt @tabatkins’s proposal and special case the root, paving the cowpaths.

[tomayac]

Having ::highlight() match all custom highlights would make sense, though.

I just naively and without knowing this wouldn't work tried the above syntax. Then, less confidently, I tried ::highlight(*), then I came here.

My use case is to avoid duplication:

/* Want: */

::highlight() {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

::highlight(spelling) {  
  text-decoration-color: yellow;
}

…

::highlight(punctuation) {
  text-decoration-color: red;
}

Instead, I have to repeat myself:

/* Reality: */

::highlight(spelling) {  
  text-decoration-color: yellow;
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

…

::highlight(punctuation) {
  text-decoration-color: red;
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

[schenney-chromium]

With the changes to highlight inheritance the concerns about defining custom properties that work on all highlights is now moot.

That leaves the custom highlight ::highlight(*) that I see some usefulness for, and it does not seem too hard to implement (though a bit messy, probably).

[bramus]

+1 on ::highlight(*). As I mentioned before there is precedent for this approach, namely with View Transitions where you can use selectors like ::view-transition-group(*) to select all groups. The same specificity-rules would apply.