Revision 735: Glücksrad mit Custom States, Foreign Objects und toten HTML-Elementen | Working Draft

Wir holen nach längerer Pause wieder das klassische Working Draft Webtechnologie-Glücksrad (https://workingdraft.de/gluecksrad/) 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 (https://mittwald.de/workingdraft?ref=...) Shownotes [00:05:21] ServiceWorkerGlobalScope und ES Modules (https://developer.mozilla.org/en-US/d...) 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] 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] 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 (https://developer.mozilla.org/en-US/d...) 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 (https://workingdraft.de/323/) aus dem Jahr 2017. [00:26:53] exportparts (https://developer.mozilla.org/en-US/d...) 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] 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...