It’s #FrontendFriday – Wie wird ein video-Tag dargestellt?

03.12.2021

Hallo #FrontendFriday-Leser/in,

heute gibt es eine kleine, aber wie ich finde interessante, Information: Die Standard HTML-tags wie z.B. <video> benutzen zur Darstellung auch normale Elemente wie z.B. <input type=“button“> für den ► Play Button.

Um es sich selbst anzuschauen zunächst ein <video> Element (ohne Video):


Normaler Quellcode

Schaut ihr euch das Element im Quellcode an, so seht ihr nur das Tag und die Konfiguration – genau das, was ihr selbst geschrieben habt

Erweiterter Quellcode

Geht nun in der Entwicklerkonsole (Chrome/Firefox: F12) in die Einstellungen (Chrome: Zahnrad, Firefox: [1]) und aktiviert „Show user agent shadow DOM“. Chrome:

Wenn ihr euch mit der aktivierten Einstellung das Element nochmals im Quellcode anschaut, seht ihr nun wie das <video> intern aufgebaut ist (shadow-root aufklappen):

Shadow DOM

Möglich ist das ganze durch die „Shadow DOM API“ [2], die die Wiederverwendbarkeit von Komponenten fördert. Müssten wir für jedes <video> auch alle Controls mit definieren, wäre das nicht sehr übersichtlich. So müssen wir nur die nötigen Einstellungen angeben und das Element nutzt diese und erstellt zusätzlich noch die Controls in einem Shadow DOM. Auch ihr selbst könnt ein solches Shadow DOM erstellen, sogar kombiniert mit HTML-Tags, die ihr auch selbst definieren könnt. Schaut euch dazu It’s #FrontendFriday – Custom HTML elements an, bei dem ein eigenes HTML Tag definiert wird, das auch einen Shadow DOM zur Darstellung nutzt.

Fazit

Ich hatte mich immer gefragt, wie die Standard-HTML Tags dargestellt werden. Diese Frage hat sich somit, zumindest teilweise, geklärt und wir haben auch noch etwas über „Shadow DOM“ gelernt. Was noch verborgen ist, ist wie das Video dargestellt wird. Eventuell mit einem <canvas&gt?; Der ist aber nicht im Shadow DOM ersichtlich…

Quellen
[1] Stackoverflow – Inspect Shadow DOM with Firefox
[2] Using shadow DOM

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*Pflichtfelder

*