progress – Bug in Chrome?

[Tim Tepaße]

Browser, die progress kennen, zeigen den Balken; die es nicht tun, zeigen den Wert (es sei denn, sie können gar keinen generierten Inhalt). So ist’s im Fuchs, so war’s in Chrome – bis vor Kurzem. Jetzt stellt Chrome beides dar. Darf der das?

Ich würde sagen ja. Setzt man sich den Taucherhelm auf und schreitet hinab in die Tiefen des Web Inspector, sieht man ja, dass der Balken von <progress> durch die Methoden von Web Components, sprich des Shadow DOMs erstellt wird. Liest man diese sagenhaft unlesbare Spec quer, dann fällt eines auf: die ganze schattige Geschichte ist a) unfassbar kompliziert und b) passiert nur auf der Ebene des DOMs. Um das zu rekapitulieren:

• <progress> wird (in Chromium/Blink irgendwo bei der tree-construction-Phase zu einem shadow host umfunktioniert und in diesen werden die shadow-tree-Elemente eingefügt.

• Beim Deklarieren eines shadow roots bei einem Elementes wird dieses zu einem shadow host. Sobald das geschieht, werden dessen Kindelemente nicht mehr förmlich gerendert (denn das übernimmt der shadow root) und werden in einen Pool für die shadow roots eingefügt, existieren aber weiterhin in einem merkwürdigen Zwischenreich noch auf DOM-Ebene, sozusagen als eine Form von API, um Inhalte in einem shadow tree einfügen zu können. Bei einem <x-carousel> z.B. die Bilder.

• Eine shadow-DOM-Implementierung von <progress> hat per Spec keine Einfügepunkte für Kindelemente, also sind diese durch schattige Magie einfach weg.

• Das gilt aber nicht für Pseudoelemente. Der ganze Styling-Prozess passiert ja „später“ als die Shadowifizierung. Diese kann, weil auf dem DOM arbeitend, keine Aussagen über spätere Pseudoelemente treffen und sollte es vermutlich auch nicht. Schließlich sind Pseudoelemente ein beliebtes Stylingmittel unter Autoren und man kann sich dazu halbwegs sinnvolle Anwendungsfälle vorstellen. Das ist wiederum die Sicht von aussen auf ein progress-Element, dessen shadow-DOM-Implementierung man nicht sieht, es sich also wie älteres replaced element anfühlt, bei dem Pseudoelemente ja auch nicht verboten wären.

• Meinem Halbwissen zufolge, nachdem ich jetzt anderthalb Stunden mit dieser ekligen Spec und Rumgoogelei verbracht habe, wäre also Chrome hier richtig und Safari und Firefox lägen falsch.

ALLERDINGS … geschieht hier noch etwas Merkwürdiges, das ich natürlich nach all obiger Recherche entdeckt habe: Die CSS-Eigenschaften des shadow-Trees sind nicht wirklich der Style, den der Balken dann hat, sondern etwas, das vermutlich wie früher durch -webkit-appearance:progress-bar kommt. Und das greift auf das natives Rendering und das OS-Toolkit zurück. Das dürfte dann auch die merkwürdige Positionierung einer ::after-Pseudoklasse am Anfang eines Elementes erklären. Aber das erklärt wiederum nicht, weshalb diese Pseudoklasse bei einem progress:indeterminate nicht gerendert wird.

Diese ganze Shadow-DOM-Geschichte aktuell in Browsern ist noch ein merkwürdiges Schattenreich. Es existieren die DOM-Strukturen, aber das unnötigerweise. Die Spec ist zu kompliziert. Es dürften auf der Welt vermutlich nur drei oder vier Leute (nämlich bei den Browserherstellern) geben, die das ganze derzeitige Zusammenspiel im Browser zwischen progress als replaced Element und progress als Shadow-DOM-Element kapieren. Ich bin es nicht. Für Otto Normal-Webdeveloper gibt es da keine Grundlage, auf der man über so etwas räsonieren und zu verlässliches Ergebnissen kommen kann. Um wirklich zu wissen zu kommen, solltest Du eventuell wirklich mal einen Bugreport schreiben.

Für Dein Problem: Ich halte es für sinnvoller, das Fallback nicht als Pseudoelement sondern als normales Kindelement auszuzeichnen. Es wird angezeigt, wenn das progress-Element nicht verstanden wird; wenn es als replaced Element verstanden wird, wird es nicht angezeigt, im derzeitigen Chaos wird es wiederum nicht angezeigt und sollte irgendwann eine richtige shadow-DOM-Variante kommen wird es auch nicht angezeigt. Und in den hypothetischen Browsern, die zwar kein CSS, aber JS können, würde es dann auch angezeigt und aktualisiert. ;)

Gruß,
Tim