Helper Funktion

Der CustomElement Helper ist darauf ausgelegt, die Verarbeitung und Erweiterung von DOM-Strukturen innerhalb der Anwendung zu übernehmen. Für eine möglichst stabile und vorhersehbare Initialisierung sollte er grundsätzlich als letzter Verarbeitungsschritt ausgeführt werden, nachdem alle relevanten Inhalte, Module und Abhängigkeiten geladen wurden.

Es werden ausschließlich die Skripte geladen, die explizit über die definierten Selektoren angefordert werden. Dadurch bleibt das System schlank und es werden nur die tatsächlich benötigten Ressourcen für die jeweilige Custom-Erstellung oder Funktionalität eingebunden. Unnötige Module oder globale Bibliotheken werden bewusst vermieden, um die initiale Ladezeit zu reduzieren und die Performance der Anwendung konstant hoch zu halten.

Automatisiert verfügbare Custom Elemente

Accordeon Elemente
Admonitions
Buttons
Chat Bubbles
Code Blocks
Eingabefelder: input, select, textarea, checkbox, radio, switch, range

Alle Attribute und Events des Elements bleiben immer unverändert erhalten, so dass auch bereits verarbeitete Elemente problemlos mit dem Helper verarbeitet werden können. Nicht automatisiert vorhandenen Elemente werden mit custom- + tagName des Elements gewrapped.

Beispiel: <custom-a><a>...</a></custom-a>.

Initialisierung

document.addEventListener('kryzo:ready', ({ detail: { CUSTOM } }) => {
    /* Ab hier stellen alle CUSTOM Funktionen zur Verfügung */
});

/*
    WICHTIG:   Diese Funktion sollte grundsätzlich als letzter Schritt 
    ▬▬▬▬▬▬▬▬   in der Anwendunggslogik ausgeführt werden
                
               Alle Elemente in eine Nodelist!
*/
const myTypes = document.querySelectorAll('code[preview],input, select, textarea,button:not(#darkmode),accordeon,chat-bubble,admonitions');
CUSTOM.run({ types: [ myTypes ]}, 
    function() {
    /* 
        Callback Funktion - An dieser Stelle ist sichergestellt, 
        dass alle Elemente umgewandelt wurden
    */
});

Wichtige Informationen zu "Verwendung des CustomElement Helpers" in ThirdParty Kombination

Weiterführend: Custom Elements und Kryzo modular erweitern