Seltsamer Firefox-Bug

[Rolf B]

Update: es passiert nur im zweiten .has-multiple-details. Wenn ich dessen Klasse auf "has-multiple-details2" umbenenne, die Regel mit :has(details[open]) doppele und darin die Klasse anpasse, dann funktioniert es.

FF kriegt es nicht hin, diese :has Regel auf beide Listen anzuwenden. Sehr merkwürdig.

Deine details sollten übrigens ein name Attribut bekommen, und das JS sollte prüfen, ob das details-Element das name Property kennt. Wenn nicht, kann es als Polyfill für den fehlenden name-Support von FF den toggle-Handler aktivieren. Und dann kannst Du den toggle-Handler auf dem .has-multiple-details Element registrieren und das toggle-Event zu Dir bubbeln lassen. In event.target steht dann das details-Element und in event.currentTarget das Container-Element, das Du derzeit mit .parentNode.parentNode herbeiholst (wobei .closest(".has-multiple-details") sicherlich robuster wäre)

Wenn der FF tatsächlich so strunzdumm ist, das CSS nicht richtig zu interpretieren, könntest Du in diesem Toggle-Handler auch eine Klasse setzen, die bei offenen Details eine Klasse setzt, die das ::after erzeugt. Ich probier's mal aus.

Rolf