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.
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 { … });