57 VIEWS

It’s #FrontendFriday – Custom HTML elements

30.06.2021

Hallo #FrontendFriday-Leser/in,

wusstest ihr schon, dass man eigene HTML-Tags wie ‚div‘ oder ‚img‘ definieren kann? Das will euch euch heute vorstellen.

Custom Elements

Mit Custom Elements[1] können eigene HTML-Elemente definiert werden, die weitere HTML-Elemente und JavaScript-Logik bündeln. Somit müssen wir komplexere HTML Strukturen nicht per Copy&Paste an mehreren Stellen einfügen, sondern können einfach ein eigenes HTML-Element platzieren. Dies ist mit Frameworks wie Angular bereits realisierbar, aber das geht auch ganz ohne.

 

Beispiel

Ich benötige unbedingt Zufallsbilder in einer bestimmten Größe und möchte auch die Motivkategorie steuern. Hierzu habe ich folgendes HTML Tag erstellt:
<img-placeholder type="random" width="200" height="300"></img-placeholder>

Zum Testen hier in Aktion:
Beim Ändern der Werte werden die Attribute des HTML-Elements geupdated. Dieses zeigt ein Bild an und gibt oben links die Attribute mit aus.

Width: Height: Type:

Bilder kommen von drei verschiedenen Services (siehe [*]).

Hier noch ein Beispiel, das vier mal das HTML-Element mit verschiedenen Parametern nutzt:

See the Pen
Custom Html-Element
by Nico (@nmutter)
on CodePen.

Code

Die Erstellung eigener Elemente ist recht simpel. Daher folgend ohne Erklärung direkt der Code für das Beispiel:

See the Pen
Custom Html-Element
by Nico (@nmutter)
on CodePen.

 

Fazit

Das Beispiel ist evtl. nicht sehr nützlich gewählt, zeigt aber, wie einfach die Verwendung des Features ist. „Logik“ lässt sich einfach verpacken und somit wiederverwenden. Um die child-HTML Elemente nicht per Skript erstellen zu müssen, werden Templates empfohlen (siehe [2]). Das Feature ist von allen Browsern (bis auf InternetExplorer) unterstützt [3].


[*] Image placeholder services
* placekitten.com
* placem.at
* lorempixel.com

Quellen
[1] Using_custom_elements
[2] Web_Components
[3] CustomElementRegistry – Browser Compatibility/

Zurück zur Übersicht

Kommentar verfassen

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

*Pflichtfelder

*