It’s #FrontendFriday – Wie wird ein video-Tag dargestellt?
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>?; Der ist aber nicht im Shadow DOM ersichtlich…
Mehr zu Java Programmierung erfahren
Quellen
[1] Stackoverflow – Inspect Shadow DOM with Firefox
[2] Using shadow DOM