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