Selbstdefinierte HTML-Elemente
Die individuellen HTML-Elemente kapseln die Darstellung und das Verhalten vom Rest des Markups, den CSS-Regeln und Scripte der Seite ab. Sie erzeugen wiederverwendbare Komponenten mit Vanilla Javascript, HTML und CSS – ohne den Einsatz von Libraries wie React und Bootstrap.
<block-card> … </block-card>
Die Definition für Custom Elements sagt ganz einfach: Alle HTML-Elemente, die mit einem Bindestrich notiert werden, sind Custom Elements.
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 WordPress-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 mehrfach 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.
Weitere Unterschied zu einem normalen HTML-Tag gibt es nicht. 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.
Vorgehen
Für ein spezielles Verhalten eines Custom Elements ist Javascript zuständig.
- Anlegen einer Javascript class, 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 { … });