Schon entdeckt? Das neue Custom Element in Webflow

Gerade ploppt eine ziemlich coole Funktion für Webflow auf, die durch Zufall vor ein paar Tagen von Timothy Ricks entdeckt wurde. Es handelt sich dabei um die Möglichkeit, ENDLICH custom HTML-Elemente direkt im Navigator anzulegen! Wie das geht und was es bringt, erfahrt ihr in diesem Artikel.

Video, SVG, Button, Table – all das ist jetzt nativ im Navigator nutzbar und spart den Umweg über ein custom embed. Jeder, der schonmal über eine Einschränkung seitens Weblfow gestolpert ist – keine Bilder innerhalb eines Headding-Elements, kein class-Attribut möglich usw. – wird diese neue Funktion zu schätzen wissen.

Was ist ein DOM-Element??

Eines vorweg: Der Name DOM-Element ist ziemlich irreführend. Es handelt sich hier um ein »normales« HTML-Element bzw. -Tag, wie alle anderen Elemente im Navigator auch. Nur eben mit der Möglichkeit, einen beliebigen Namen vergeben zu können.

Das DOM hingegen ist der Strukturbaum, den die Browser aus dem HTML generieren und als Grundlage für die Darstellung der Website nutzen. Dieser Strukturbaum bestimmt dann den Aufbau der Website und kann unter anderem durch JavaScript verändert werden. Dies geschieht zum Beispiel bei einem Toggle-Button für ein Menü, der eine Klasse »open« zum DOM hinzufügt, wodurch das Menü erscheint, und beim wiederholten Anklicken wieder entfernt, wodurch das Menü wieder verschwindet.

Das neue DOM-Element macht aber nichts dergleichen. Daher hoffe ich, dass der Default-Name in den Settings entsprechend zu “Custom Element” umbenannt wird, wie auch schon aus der Community angeregt. Somit wird deutlicher, dass ich als Entwickler ein beliebiges HTML-Element hinzufügen kann. Wer dieses Feld nutzt, sollte sich also entsprechend mit HTML auskennen und wissen was die verschiedenen Elemente bewirken.

Wie setzte ich das Custom Element ein?

Das Custom Element ist über das Add-Panel im Webflow-Designer verfügbar, zu finden in der Advanced-Section. Standardmäßig wird zunächst ein Div-Element erstellt, in den Settings kann das Element dann beliebig geändert werden. Hier solltet ihr allerdings wissen, was ihr macht, eine Warnung weist darauf hin, dass Rendering-Probleme entstehen können, wenn HTML-Elemente falsch benannt oder verschachtelt werden. Dann gibt es in den Settings noch die Möglichkeit, eigene Attribute hinzuzufügen. Auch hier mit dem großen Vorteil, ohne Einschränkung alles eingeben zu können, was mir in den Sinn komm (natürlich im Rahmen der Webstandards).

Ein paar Anwendungsfälle

Grafiken/Bilder innerhalb von Überschriften

In Webflow ist es nicht möglich, Bilder innerhalb einer Heading zu platzieren. Hier hat oben erwähnter Manuel ein vorgefertiges Snippet, das ihr einfach in euer Webprojekt kopieren und bearbeiten könnt.

SVG, auch mit über 10.000 Zeichen

Jetzt könnt ihr SVGs direkt in Webflow einbinden, ohne custom embed! Und gleichzeitig auch noch das nervige 10.000-Zeichen-Limit von Webflow umgehen. Dafür hat Manuel Ogomigo ein Tool erstellt. Einfach per Drag and Drop ein SVG hineinziehen:

https://www.flowscriipt.com/svg-to-dom-webflow

Fill und Stroke könnt ihr zusätzlich durch currentColor überschreiben. Dann lässt sich einfach im Style-Panel von Webflow die Farbe der Grafik einstellen. Ich find’s klasse!

Nun einfach das SVG konvertieren und in Weblfow einfügen. Dann seht ihr im Navigator ein waschechtes SVG.

Bei zu komplexen SVG-Grafiken kommt das Tool allerdings an seine Grenzen. Hier hilft es, im Grafikprogramm Verschachtelungen zu reduzieren und Gruppen aufzulösen, sodass nur noch path-Elemente übrig bleiben.

Buttons

Wir können endlich das Button-Element verwenden. Warum das gut ist? Webflow bezieht den Begriff »Button« leider nur auf die visuelle Erscheinung, also auf ein Element, das wie ein Button aussieht. Dabei unterscheidet HTML zwischen Links (<a>-Element) und Buttons (<button>-Element). Während Links dazu da sind, auf andere Seiten oder Dokumente zu verweisen, ist es die Aufgabe von Buttons, Aktionen auf der jeweiligen Seite auszuführen, z.B. eine Navigation auszuklappen, ein Akkordion zu öffnen, Elemente ein- oder auszublenden. Wenn wir für den entsprechenden Fall das richtige Element nutzen, hilft das Screenreader- und Tastaturnutzern, die Seite besser steuern zu können. Details dazu liefert Eric Eggert in seinem englischsprachigen Artikel Buttons vs Links. Man könnte auch ein Div-Element halbwegs zurechtbiegen, warum das aber keine gute Idee ist, verrät Manuel Matuzović.

Tables

Ich war ziemlich perplex, als ich feststellen musste, dass Webflow keine Tabellen ermöglicht. Zum Glück ist das Thema jetzt Geschichte. Was wie eine Tabelle aussieht, sollte auch im Code entsprechend ausgezeichnet werden. Das hilft Screenreadern, die Tabelle als solche zu interpretieren und den Nutzern richtig vorzulesen.

Reservierte Attribute

Es wird gerade ziemlich nerdig, aber vielleicht bist du auch schon mal darüber gestoßen: Webflow erlaubt bei manchen Elemente bestimmte Attribute nicht und gibt den Hinweis aus, dass dieser Name reserviert sei. In einem älteren Forum-Post wird eine Liste bekannter reservierter Attribute ausgegeben (Punkt 14). Diese Einschränung lässt sich nun mit einem Custom Element nunumgehen.

Fazit

Ich finde die neuen Möglichkeiten super spannend. Als jemand, der als Frontend-Entwickler jahrelang aus dem Vollen schöpfen konnte, war Webflow in dieser Hinsicht ein enormer Rückschlag. Das ist nun mit einem Mal passé und bietet uns allen viel mehr Möglichkeiten in der Umsetzung einer Website.

Es ist dennoch Vorsicht geboten: HTML basiert auf bestimmten Regeln, die man kennen und auch einhalten sollte. Nicht jedes Element darf mit jedem verschachtelt werden. So hat Timthoy Ricks in seinem Headline-Beispiel div-Elemente innerhalb der <h2> platziert, was nicht erlaubt ist. Wer hier Zweifel hat, kann immer den W3C-Validator zur Hilfe ziehen und seine Website prüfen lassen.

Ich werde in den kommenden Wochen noch weiter mit den neuen Möglichkeiten experimentieren und bei Gelegenheit darüber berichten.

Hast du das custom Element auch schon ausprobiert? Gibt es für dich gute Anwendungsfälle? Lass es mich gerne auf Linkedin wissen.

‍