Custom Elements – individuelle HTML-Tags

Individuelle eigene HTML Tags

Custom Elements erweitern das Standard-HTML um eigene individuelle HTML-Elemente und übernehmen Aufgaben von der Darstellung im Browser bis hin zu Verhalten (Javascript), die es in den vorgefertigten HTML-Elementen nicht gibt.

Eigene HTML-Elemente bringen ein modulares HTML-Markup ins Spiel, das an weiteren Stellen in einer anderen Umgebung wiederverwendbar ist.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Die individuellen HTML-Elemente kapseln Darstellung und Verhalten vom Rest des Markups, den CSS-Regeln und Scripte der Seite ab und erzeugen wiederverwendbare Komponenten einfach mit Vanilla Javascript, HTML und CSS, ohne den Einsatz von Libraries wie React und Bootstrap.

Die Custom Elements-Spezifikation definiert eine zusätzliche Methode document.registerElement (), ändert die beiden Methoden document.createElement() und document.createElementNS() und setzt einen neuen Pseudo-Selektor :unresolved.

Globale Variablen

Wer programmiert, kennt das Problem von globalen Variablen: Sie sind immer in Gefahr, an der falschen Stelle überschrieben zu werden. Programmiersprachen arbeiten mit Funktionen, Objekten und Klassen und ihren lokalen Variablen dagegen an.

In CSS besteht ebenfalls die Gefahr, dass Regeln an anderer Stelle beeinflußt und überschrieben werden. Wir können zwar anhand von Klassen und Selektoren diese Gefahr dämpfen, aber vollständig abkapseln können wir HTML-Elemente gegen die Beeinflussung nicht. CSS hat keine Module.

Komplexes HTML

Viele zusammengesetzte Elemente werden an vielen Stellen verwendet, z.B. drei Spalten in einem Block wie sie vom Gutenberg-Editor angelegt werden oder die Beschreibung eines Produkts mit dem Produktbild, Preis, Menge, Kurzbeschreibung, Verfügbarkeit.

film-card { counter-increment: chartnum; display:flex; }
<block-card>
	<film-card>
		…
	<film-card>
<block-card>

und mit eigenen Attributen für Variationen

<block-card start-num="6" lead-color="blue">
	<film-card>
		…
	<film-card>
<block-card>

Mann unter Feuer

Der abgewrackte Navy-Soldat Creasy übernimmt einen Bodyguard-Job in Mexiko.

Peanuts Der Film

Charlie Brown, Snoopy und Lucy haben ihren ersten Auftritt als computeranimierte Helden.

Stargate Origins

1930 kämpfen Professor Langford und seine Tochter noch mit den Rätseln des Artefakts.

DÉJÀ VU

Terroristen sprengen eine Fähre – Carlin (Denzel Washington) unternimmt einen Zeitsprung.

Känguru-Chroniken

Kleinkünstler Marc-Uwe (Dimitrj Schaad) und das antikapitalistische Känguru.

Stargate Origins

1930 kämpfen Professor Langford und seine Tochter noch mit den Rätseln des Artefakts.

Custom Elements umgehen die Probleme, die durch mehrmals innerhalb einer Seite genutzte komplexe Strukturen entstehen, wie z.B. gleiche Klassennamen oder doppelte IDs.

Custom Elements Syntax

Der Name eines Custom Elements muss einen Bindestrich enthalten, z.B. cosmetic-product, extended-sidebar, top-header. Zusammengesetzte Tag-Namen wie cosmeticProduct, blueLargeButton und reiseBeschreibung hingegen sind invalid – nicht korrekt. Jedes Custom Element muss aus einem öffnenden und einem schließenden Tag bestehen. Selbst-schließende Elemente wie das img-Tag sind in Custom Elements nicht erlaubt. Durch den Bindestrich unterscheidet der HTML-Parser Custom Elements von regulären HTML-Tags.

Jedes Custom Element kann nur einmal definiert werden, ansonsten kommt es zu einer DOM Exception.

Ansonsten gibt es keinen Unterschied zu einem normalen HTML-Tag. Ein Custom Element kann dynamisch von Javascript erzeugt und mehrfach in einer Seite verwendet werden, Event Listener können an das Custom Element gebunden werden.

Custom Elements v1: Reusable Web Components

Vorgehen

Für ein spezielles Verhalten eines Custom Elements ist Javascript zuständig.

  • Anlegen einer Javascript Klasse, um die Funktionalität der Web Component festzulegen
  • Definition des Custom Elements mit customElement.define('cosmetic-product',CosmeticProduct)
  • Evtl. mit Element.attachShadow () ein Shadow DOM hinzufügen
class block-card extends HTMLElement { … }
window.customElements.define('block-card', BlockCard);

Alternativ 

window.customElements.define('block-card', class extends HTMLElement { … });