[css-pseudo] Spec inconsistency on custom properties on highlight pseudo elements

[EricSL]

https://drafts.csswg.org/css-pseudo/#highlight-styling

The spec is confusing about custom properties on highlight pseudo elements, and I believe contradictory as well. These issues are in the latest version of the spec as well. The first part that I found confusing was this:

The following properties apply to the highlight pseudo-elements:

• [...]
• custom properties [CSS-VARIABLES-1]

For any properties not listed above, but which are required to resolve the values of applicable properties, their computed values are copied from those of the originating element, ignoring any values specified on the highlight pseudo-element itself. For example:

• [...]
• custom properties [CSS-VARIABLES-1] (used in var() substitutions)

I think I know what was meant here. Custom properties are in the first list because they can be applied to highlight psuedo-elements. This means it is not accurate to say values specified on the highlight pseudo-element itself are ignored, as implied by their inclusion in the second list, but they were added to that list to explain that they inherit from the originating element like everything else on that list and unlike everything else on the first list. This is poorly written and I think would be clearer if it were removed from both lists but after each list explained how custom properties work.

Then the part of the spec that I'm pretty sure is wrong:

https://drafts.csswg.org/css-pseudo-4/#highlight-cascade

EXAMPLE 13

For example, if an author specified

:root {
   --background-color: green;
   --decoration-thickness: 10px;
   --decoration-color: purple;
 }
 ::selection {
   --decoration-thickness: 1px;
   --decoration-color: green;
 }
 div::selection {
   --decoration-color: blue;
   background-color: var(--background-color, red);
   text-decoration-line: underline;
   text-decoration-style: line;
   text-decoration-thickness: var(--decoration-thickness, 5px);
   text-decoration-color: var(--decoration-color, red);
 }

The universal ::selection uses the user-agent’s default styling because it only defines custom properties, with no properties that influence the appearance. A div’s selection highlight would apply a green background to the selected content, with a 10px thick blue underline. Since --background-color and --decoration-thickness custom properties are not specified on the div::selection peudo-element, they are inherited from its originating div element, which itself inherits the custom properties from the root. However since --decoration-color is specified on the div::selection itself, its value from the originating element is not used.

The spec claims the decoration thickness should be 10px and the color blue, reading custom properties from div::selection but not from ::selection. It makes no sense to me that, where the --decoration-color: blue; declaration from div::selection applies, the --decoration-thickness: 1px; rule from ::selection would not also apply. I tried this example in Chrome and saw a 1px blue underline, not 10px, contradicting the spec, but the spec doesn't make sense to me here.