Working Draft

Wir holen nach längerer Pause wieder das klassische Working Draft Webtechnologie-Glücksrad hervor. Der Zufallsgenerator serviert uns Webstandards aus HTML, CSS, JavaScript und Browser-APIs, zu denen wir uns ohne Vorbereitung etwas Sinnvolles zusammenreimen müssen.

Diesmal landen wir unter anderem bei Service Workern als ES Modules, Custom States und Shadow-DOM-Styling, Iteratoren, SVG und foreignObject, parametrisierten SVGs sowie einem Stück HTML-Archäologie rund um <cite> und das längst verblichene <blink>.

Shownotes

[00:05:21] ServiceWorkerGlobalScope und ES Modules

Das erste Thema führt uns zu Service Workern und der Möglichkeit, sie als ECMAScript-Module zu registrieren. Gegenüber importScripts() bekommen wir damit die gewohnte Modulsemantik mit import und export, eigenem Scope und Strict Mode. Wir sprechen darüber, warum das auch jenseits der Syntax angenehm ist: Utilities können in Webseite und Worker nach demselben Modulmodell organisiert werden und wir müssen weniger zwischen zwei leicht unterschiedlichen JavaScript-Welten umdenken. Der eigentliche ServiceWorkerGlobalScope ist dabei grob das Gegenstück zu window im Service Worker und stellt unter anderem Worker-spezifische APIs bereit.

[00:12:17] moveBefore() und zustandserhaltendes Verschieben

Von globalen Objekten kommen wir zu Schepps Praxis, vorhandene DOM-APIs zu patchen. Anlass ist moveBefore(), mit dem Elemente im DOM verschoben werden können, ohne ihren Zustand durch ein Entfernen und erneutes Einfügen zu verlieren. Bei Custom Elements hat das Konsequenzen für die Lifecycle-Callbacks: Ein zustandserhaltendes Verschieben verhält sich anders als das klassische Disconnect-und-Reconnect und bringt dafür den connectedMoveCallback() ins Spiel.

[00:15:56] Custom States mit :state()

Mit :state() können Custom Elements eigene Zustände nach außen für CSS sichtbar machen. Über attachInternals() und die Custom-State-API lässt sich beispielsweise ein eigener Open-, Closed- oder Disabled-artiger Zustand definieren, auf den Styles anschließend mit :state(...) reagieren. Wir vergleichen das mit eingebauten Zuständen nativer Elemente und diskutieren einen Haken: Wird der Zustand erst durch später ausgeführtes JavaScript hergestellt, kann es zu sichtbarem Flackern kommen. Für einen Dark-Mode-Schalter kann deshalb ein bereits beim Parsen vorhandenes Attribut die robustere Single Source of Truth sein.

[00:24:52] JavaScript Iteration Protocols

Die Iterationsprotokolle haben wir zwar schon früher erwischt, bekommen diesmal aber einen schönen realen Anwendungsfall geliefert: Eine paginierte Web-API lässt sich als asynchroner Iterator modellieren, sodass Konsumenten mit for await...of Seite für Seite abarbeiten können, ohne eine getAll()-Funktion anzubieten, die zwangsläufig sämtliche Daten lädt. Wer tiefer einsteigen möchte, findet das Thema ausführlicher in unserer alten Iteration 323: (Asynchrone) Iteratoren aus dem Jahr 2017.

[00:26:53] exportparts

Mit part lassen sich Teile eines Shadow DOM gezielt für Styling von außen freigeben. exportparts setzt noch eine Ebene darauf: Enthält eine Web Component weitere Web Components in ihrem Shadow DOM, kann sie deren Parts durch die eigene Shadow-DOM-Grenze hindurch weiterreichen und dabei auch umbenennen. Damit lassen sich verschachtelte Komponenten von außen stylen, ohne die Kapselung vollständig aufzugeben. Wir diskutieren aber auch, ob gröber geschnittene Web Components viele dieser Probleme von vornherein vermeiden können.

[00:38:19] SVG foreignObject

<foreignObject> erlaubt es, Inhalte aus einem anderen XML-Namespace in SVG einzubetten, insbesondere HTML. Daraus ergeben sich einige interessante Anwendungen. Wir sprechen über das Rendern eines DOM-Ausschnitts über SVG und Canvas als Screenshot, über HTML als Ausweg aus dem unbequemen Textlayout von SVG und über die Frage, wie weit sich unterschiedliche Dokumenttypen ineinander verschachteln lassen. Bei inline eingebettetem SVG lässt sich das HTML innerhalb eines foreignObject außerdem abhängig von Klassen des umgebenden SVG stylen. Ist das SVG dagegen als externe Bilddatei eingebunden, stehen solche Beziehungen nicht auf dieselbe Weise zur Verfügung.

[00:40:29] Screen Capture API

Vom Screenshot-Hack mit foreignObject kommen wir kurz zur Screen Capture API und getDisplayMedia(). Dabei schauen wir uns die Unterschiede beim Browser-Support an und stellen fest, dass sich insbesondere die feineren Möglichkeiten zur Auswahl und Aufnahme einzelner Fenster, Tabs und Audioquellen zwischen den Browsern unterscheiden.

[00:50:28] CSS link-parameters

Für extern eingebundene SVGs könnte link-parameters künftig eine interessante Brücke bilden. Die CSS-Eigenschaft erlaubt es, Parameter an verlinkte Ressourcen zu übergeben. Im Ziel lassen sich diese Werte über env() wieder auslesen. Damit könnte dasselbe SVG beispielsweise mit unterschiedlichen Farben parametrisiert werden, ohne dafür verschiedene Dateien zu erzeugen. Wir überlegen weiter, ob sich Änderungen solcher Parameter innerhalb des SVG auch mit CSS Transitions kombinieren lassen und ob die Werte bis in HTML innerhalb eines foreignObject durchgereicht werden könnten.

[00:55:45] Das <cite>-Element

Zum Abschluss beschert uns das Glücksrad HTML-Archäologie. <cite> zeichnet nicht das Zitat selbst aus, sondern die Referenz auf das zitierte Werk. Ein längeres Zitat gehört beispielsweise in ein <blockquote>, während <cite> dessen Quelle benennen kann. Wir verfolgen das Element zurück bis HTML 2.0 und stellen dabei fest, wie schwer bei solch alten Features überhaupt sinnvoll zu bestimmen ist, ab wann ein Browser sie „unterstützt“.

[01:01:20] Das nicht existente blink-Element

Von <cite> geraten wir zum abgeschafften <blink>. Moderne Browser behandeln es wie ein unbekanntes Element, gleichzeitig erwähnt der HTML-Standard solche historischen Elemente ausdrücklich als nicht zu verwendende Elemente. Das führt uns zu der etwas philosophischen Frage, was es technisch eigentlich bedeutet, dass ein HTML-Element „nicht existiert“, wenn Parser und Entwicklerwerkzeuge dennoch besondere Regeln für seinen Namen kennen. Die Entstehungsgeschichte von <blink> liefert dazu noch die passende Webhistorie: Die Idee entstand laut Lou Montulli bei einer Unterhaltung in einer Bar und wurde anschließend über Nacht implementiert.

Links

Fronteers Dark Mode

Schepp berichtet kurz von der gerade vergangenen Fronteers-Konferenz in Dordrecht und kündigt die nächste Ausgabe für den 1. Oktober 2027 an.

Anhören

Feedback-Kanäle