27 Oct 2026
Revision 735: Glücksrad mit Custom States, Foreign Objects und toten
HTML-Elementen
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 und das
längst verblichene .
UNSER SPONSOR
Alle reden von Automation – aber wo betreibst du eigentlich deine Tools?
Egal ob n8n oder andere Container-Setups: Mit dem Container-Hosting von mittwald
läuft deine Anwendung in wenigen Minuten. Die nervige Konfiguration? Geht easy
von der Hand – inklusive Vorschlägen für Umgebungsvariablen und Entrypoints.
Also: Fang an zu automatisieren. Dein erster Schritt ist ein Hosting bei
mittwald. 👉 mittwald.de/workingdraft
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
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 -ELEMENT
Zum Abschluss beschert uns das Glücksrad HTML-Archäologie. zeichnet nicht
das Zitat selbst aus, sondern die Referenz auf das zitierte Werk. Ein längeres
Zitat gehört beispielsweise in ein
, während 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 geraten wir zum abgeschafften . 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
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.
