In diesem Artikel geht es um das Erstellen einer eigenen
Web Komponente.
Mit Hilfe von Klassen und Funktionen von Monster
Zuerst erstellen wir eine von CustomControl
abgeleitete Klasse. Die Elternklasse
CustomControl
implementiert bereits einige Funktionen, die das Leben im folgenden
leichter machen.
class Button extends CustomControl {
}
Der nächste Schritt legt fest, welchen Tag das Control im HTML bekommen soll.
class Button extends CustomControl {
static getTag() {
return "monster-button";
}
}
Damit man später das Control konfigurieren kann, müssen wir die Möglichkeit,
Optionen anlegen zu können, schaffen. Wir können hier auf die Strukturen der Klasse
CustomControl
aufsetzen und brauchen nur ein eigenes Property default
anzulegen.
class Button extends CustomControl {
// ..... other implementations
get defaults() {
return Object.assign({}, super.defaults, {})
}
}
Über diese Struktur werden auch die Templates des Controls definiert. So kann man
dem Control ein Standard mitgeben und dem Anwender des Controls die Möglichkeit geben
die Templates anzupassen.
Jetzt machen wir uns also an das Aussehen des Controls und erstellen dazu ein Template.
Wir wollen das der Button einen einfachen HTML5-Button verwendet.
<button>Hello!</button>
Das Haupttemplate des Buttons wird über die Option templates.main
gepflegt.
Wir müssen das HTML also in die oben eingeführte default
Struktur einfügen. Wir können
das HTML direkt hier angeben.
return Object.assign({}, super.defaults, {
templates: {
main: `<button>Hello!</button>`
},
})
Um die Übersicht bei größerne Templates zu behalten, kann man alternativ das
Template auch in eine Funktion auslagern und hier nur die Funktion aufrufen.
return Object.assign({}, super.defaults, {
templates: {
main: getTemplate()
},
})
Wenn wir jetzt den HTML-Tag <monster-button></monster-button>
in eine HTML-Datei einfügen
erhalten wir soweit so unspektakulär einen Button.

Jetzt kommt die Magie. Im DOM gibt es zwei wichtige Methoden, die beim Einbinden und
beim Entfernen eines Controls aufgerufen werden.
Wird ein Control in das DOM eingehängt, so wird die Methode
connectedCallback
aufgerufen.
Beim Entfernen eines Controls aus dem DOM wird dagegen die Methode
disconnectedCallback
aufgerufen.
aufgerufen.
Wir implementieren die beiden Methoden in unserer neuen Klasse.
class Button extends CustomControl {
// ..... other implementations
connectedCallback() {
super.connectedCallback();
}
disconnectedCallback() {
super.disconnectedCallback();
}
}
Innerhalb dieser beiden Methoden können wir nun zum Beispiel Strukturen initailisieren oder
Eventhandler hinzufügen und wieder entfernen.
Das CustomControl
besitzt zwei weitere wichtige Methoden, die
man überschreiben kann, um das Control zu initialisieren. Diese beiden Methoden
haben keinen direkten Methodennamen, sondern verbergen sich hinter einem
Symbol-Schlüssel.
import {
assembleMethodSymbol,
initMethodSymbol,
} from "@schukai/monster/dist/modules/dom/customelement.js";
class Button extends CustomControl {
// ..... other implementations
[initMethodSymbol]() {
super[initMethodSymbol]();
}
[assembleMethodSymbol]() {
super[assembleMethodSymbol]();
}
}
Die Methode [initMethodSymbol]()
wird direkt vom Konstruktor aufgerufen und dient zur einmaliegen initialisierung
interner Strukturen.
Die Methode [assembleMethodSymbol]()
wird beim ersten einbinden des Kontrols in das
DOM aufgerufen. Wird das Control wieder entfernt und erneut eingebunden, so wird
[assembleMethodSymbol]()
nicht nochmal aufgerufen.
@startuml filename2.png
Alice --> Bob
@enduml