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 <cite> und das längst verblichene <blink>.

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 Tr