It’s #FrontendFriday – Custom HTML elements

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.

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.

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].

Mehr über Frontend Entwicklung erfahren

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

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