Selecting `::details-content::before` pseudo element errors

[james-nash]

I have some CSS that targets a ::before pseudo element of the <details> element's ::details-content using a selector containing ::details-content::before. It seems to be supported in the major browsers (current versions of Firefox, Safari & Chrome parse and apply those styles - see screenshots below) so I presume this is valid CSS, however lightningcss errors with "Invalid state" when it encounters that.

You can reproduce this in the Lightning CSS Playground with the following code:

::details-content::before {
  background-color: red;
}

Given that browsers accept this selector, I think Lightning CSS should be able to handle it and not error, so I think this is a bug.

---

As promised above, here a screenshot of the various browser dev tools showing this selector working fine:

Firefox (v150)

Chrome (v148)

Safari (v26.4)

[sapphi-red]

It seems it's disallowed in the spec (unless I missed):

Note: As a reminder, pseudo-elements cannot be chained together unless explicitly allowed. For example, ::marker::before is not allowed; but ::before::marker is.
https://drafts.csswg.org/css-pseudo-4/#intro:~:text=NOTE%3A%20As%20a%20reminder%2C%20pseudo%2Delements%20cannot%20be%20chained%20together%20unless%20explicitly%20allowed.%20For%20example%2C%20%3A%3Amarker%3A%3Abefore%20is%20not%20allowed%3B%20but%20%3A%3Abefore%3A%3Amarker%20is.

[james-nash]

Interesting. TBH, I was only going by browser behaviour, and hadn't checked the spec (sorry). However, I've just had a look at the spec, and I think ::details-content::before is allowed after all...

Apparently, ::details-content is an "element-backed pseudo-element", and the chapter on element-backed pseudo-elements states:

All pseudo-classes and pseudo-elements are syntactically allowed after an element-backed pseudo-element (such as x-button::part(label):hover or x-button::part(label)::before)

[sapphi-red]

Ah, true; I missed that.