Was sind Custom Elements und was kann man damit machen? Auf dem WordCamp Europe sprachen wir dazu mit dem Webentwickler Felix Arntz. Er war lange Zeit Teil des WordPress Core-Teams und wechselte dann zum WordPress-Projekt von Google. Unter anderem beschäftigt sich Felix mit der Integration von Custom Elementes in Gutenberg.
GoDaddy: Auf dem WordCamp Europe hältst du eine besondere Session: Custom Elements. Worum geht es da genau?
Felix: Custom Elements ist erst eine neue Web-API, eine neue Browser API, die – einfach gesagt - einem Entwickler erlaubt, eigene HTML-Tags zu definieren. Wenn man zum Beispiel einen Kalender in seine Webseite integrieren möchte, kann man das individuell tun. Dabei muss manuell ganz viele einzelne Divs und Elemente erstellen, um daraus das Kalenderelement zu gestalten.
Es wäre allerdings viel einfacher, wenn dieser Nutzer oder diese Nutzerinnen einfach nur einen einzelner HTML-Tag platzieren müsste, um den gesamten Kalender zu platzieren.
Custom Elements erlaubt, eigene HTML Tags zu definieren und genau zu definieren, was sie tun. Andere Nutzer und Nutzerinnen brauchen dann einfach nur den entsprechenden HTML-Tag in die Webseite einzufügen. Das macht diese Blöcke wiederverwendbar. Man muss nicht mehr jedes Mal diese ganzen 20 HTML-Elemente noch einmal schreiben.
GoDaddy: Oder kopieren … Aber dafür muss man natürlich zuerst im Code finden.
Felix: Ja genau. Bei Custom Elements trägt man nur den einen Tag ein. Und wenn man die Funktion des Elements ändern möchte, dann macht man das nur an einer Stelle, wo man definiert hat, wie das Element funktioniert.
GoDaddy: Wo werden diese Elemente gespeichert? Gibt es dafür Verzeichnisse, in denen sie abgelegt werden?
Felix: Für Custom Elements gibt es eine Browser API, wo man diese registrieren muss. Wenn ein Element registriert ist, dann ist es verfügbar. Man kann sie dann einfügen und verwenden.
Das ganze System ist modular aufgebaut. Man hat einzelne HTML-Tags, die man wiederverwenden kann. Es gibt natürlich auch Verzeichnisse, die verschiedene Custom Elements enthalten. Man kann sich dann aussuchen, was man braucht. Zum Beispiel, wenn ich einen Kalender suche, dann gibt es bestimmt zig verschiedene Ausfertigungen von…
GoDaddy: Diese Verzeichnisse sind frei zugänglich oder werden die auch kostenpflichtig angeboten?
Felix: Das gibt es mit Sicherheit auch. Aber bisher habe ich noch keine kostenpflichtigen Customs Elements gesehen.
GoDaddy: Im Moment ist das Projekt noch in eine Entwicklungsphase – oder?
Felix: Ja.
GoDaddy: Was sind die größten Herausforderungen bei der Entwicklung?
Felix: Meiner Meinung nach haben Custom Elements hauptsächlich Vorteile, zum Beispiel die Modularität. Man entwickelt die gesamte Funktionalität, das Design, die Interaktivität und das Layout in dem jeweiligen Custom-Element, das man dann registriert. Und dann kann man es überall sonst einfach wiederverwenden.
Ich denke, die Herausforderung ist die Umstellung auf ein neues Paradigma und die Umgewöhnung von der Art und Weise, wie man bisher gearbeitet hat oder wie man herkömmlicherweise Webseiten erstellt hat.
GoDaddy: Was sind die Einsatzmöglichkeiten? Was kann man damit machen?
Felix: Da gibt es im Prinzip unbegrenzte Möglichkeiten: man kann einzelne Teile einer Webseite als Custom Elements implementieren …
GoDaddy: Oder man kann sie komplett daraus zusammensetzen?
Felix: Genau. Im Prinzip ist das wie einen Baukasten: Man kann sich selbst Custom Elements schreiben. Man kann sich aber auch andere, von anderen Entwicklern und Entwicklerinnen herunterladen und dann in seinem eigenen Projekt benutzen. Es ist wie ein Mix-and- Match-System, mit dem man seine Webseite aus den Elements zusammenbauen kann. Das ist an sich das Gleiche, wie mit HTML heute. Nur sind mit HTML die Elemente ganz kleine wie z.B. ein einzelner Satz.
Bei Custom Elements geht es hauptsächlich um Wiederverwendbarkeit von bestimmten Blöcken und Modularität. Man hat alles an einer Stelle für ein bestimmtes Element, sodass man es sehr leicht wiederverwenden kann. Es können auch wenig Konflikte auftreten. Es ist irrelevant, ob man ein Custom Element in Kombination mit einem anderen zusammen nutzt. Sie werden sich nicht im Weg stehen.
GoDaddy: Gibt es eine Verknüpfung zwischen Custom Elements und Gutenberg Blöcken? Oder ganz allgemein: Kann man diese mit Gutenberg nutzen?
Felix: Darüber dreht sich hauptsächlich mein Vortrag morgen. Ich habe ein bisschen experimentiert, ob man Custom Elements und mit Gutenberg benutzen könnte. Gutenberg wurde ja mit dem Webframework React entwickelt. Da habe ich mich gefragt: könnte man bestimmte Teile von Gutenberg nicht auch als Custom Elements bauen?
Es gibt nämlich ein entscheidender Unterschied zwischen Frameworks wie React und Custom Elements, denn diese sind ein Webstandard. Es gibt eine vom Web empfohlene Methode, um solche abgeschlossenen Komponenten zu definieren. Wenn man Custom Elements benutzt, dann funktionieren die - überall. Wenn man ein anderes Webframework wie React benutzt, dann sind Gutenberg Elemente an sich nicht kompatibel. Custom Elements dagegen wären mit allem kompatibel.
Das erinnert ein bisschen daran, dass auch andere CMS wie z.B. Drupal beginnen, Gutenberg zu implementieren. Das heißt: alle Blöcke, die für Gutenberg entwickelt werden, kann man in beiden Systemen nutzen.
Das ist in ein gute Parallele. Alle Custom Elements, die man entwickelt, kann man auch in React benutze, man kann sie auch in Vue benutzen oder in normalem HTML oder Java Script. Die sind mit allem kompatibel. Im Moment ist das noch experimentell, aber man kann sich vorstellen, dass man einen einzelnen Gutenberg Block als Custom Element implementieren kann. Der Vorteil davon wäre, dass man z.B. diese Elemente sowohl im WordPress Editor benutzen kann, weil sie damit sowieso kompatibel sind, aber auch im Frontend der Website. Während man im Frontend der Webseite in der Regel kein React benutzt, weil React in den WordPress Themes nicht verwendet wird.
Damit sind wir wieder beim Thema Wiederverwertbarkeit. Wir reden in den Backend-Editoren ja immer von „what you see is what you get“. Und im Fall der Custom Elements hat man das so schon per Definition. Man benutzt genau das gleiche im Backend, wie im Frontend. Da weiß man, das wird und sollte gleich aussehen.
GoDaddy: Wo kann man, außer in deinem Vortrag, mehr über Custom Elements erfahren. Kannst du uns interessante Quellen nennen?
Felix: Da muss ich kurz noch einmal ein bisschen ausholen. Custom Elements sind Teil einer größeren Spezifikation, die sich Web Components nennt. Im Großen und Ganzen sind sie der Kern davon. Es gibt eine Webseite: Webcomponents.org, die ganz viele Einführungen zum Thema bietet und die auch eine Library, wo man sich alle bereits veröffentlichten Custom Elements anschauen kann und wo man sich dann selbst auch etwas zum Ausprobieren herunterladen kann.
GoDaddy: Vielen Dank für eine interessanten Einblicke in das spannende Thema.
Hier findest du weitere Video-Interviews mit WordPress-Experten
- WordPress Updates automatisieren mit ASMP – Videointerview mit Alain Schlesser
- Wie sieht die Zukunft von WordPress aus? Videointerview mit Konstantin Obenland
- Wie funktioniert Remote Management für externe WordPress Seiten? – Videointerview mit Jan Löffler
- Wie erstellt man mehrsprachige WordPress-Seiten? Videointerview mit Pascal Birchler
- WordPress Enterprise Lösungen mit Gutenberg – Videointerview mit Robert Windisch
- Wie testet man neue WordPress-Funktionen? – Videointerview mit Thorsten Frommen
- Wie sichert man ein Content Management System? – Videointerview mit David Jardin
- Wie wird man Teil des WordPress Projekts? Videointerview mit Birgit Olzem
- Wie sichert ihr WordPress-Kundenseiten? Videointerview mit Jonas Hellwig
- Was sind Custom Elements? – Videointerview mit Felix Arntz
