Komponenten sind aus der modernen Webentwicklung nicht mehr wegzudenken. In allen JavaScript-Frameworks mit etwas gr\u00f6\u00dferer Verbreitung, wie Svelte oder Vue, l\u00e4sst sich der Code in wiederverwendbaren Komponenten organisieren. Alle diese Frameworks haben jedoch gemeinsam, dass die Implementierung der jeweiligen Komponenten nur innerhalb des jeweiligen Frameworks funktioniert. Es ist nicht ohne weiteres m\u00f6glich, eine Svelte-Komponente in einer Vue-Anwendung zu benutzen oder umgekehrt. Daher ist es nicht verwunderlich, dass sich die K\u00f6pfe hinter den Webstandards eine L\u00f6sung \u00fcberlegt haben, wie sich Komponenten unabh\u00e4ngig von bestimmten Frameworks entwickeln und nutzen lassen. In diesem Prozess sind diverse Standards f\u00fcr HTML, DOM, CSS und JavaScript entstanden, die heute allgemein unter dem Begriff \u201eWeb Components\u201c zusammengefasst werden.<\/p>\n\n\n\n
Bei d.velop schauen wir ebenfalls gespannt auf diese Entwicklung. Seit einiger Zeit sind Web Components ein fester Teil in der Planung zuk\u00fcnftiger Features. Insbesondere wenn es um Themen wie eine zentrale Component Library oder Micro-Frontends geht, sind Web Components nicht mehr aus den K\u00f6pfen zu bekommen. Da wir diverse Frontend-Frameworks in verschiedenen Bereichen einsetzen, sind Web Components die ideale L\u00f6sung f\u00fcr eine umfassende Interoperabilit\u00e4t zwischen den Teams.<\/p>\n\n\n\n
In diesem Blogartikel…<\/p>\n\n\n\n
Wer Anfang der 2000er Jahre oder fr\u00fcher mit Webentwicklung angefangen hat, wird sich \u00fcber Komponenten vermutlich noch wenige Gedanken gemacht haben. Zumindest gab es keine (allgemein bekannten) Frameworks, die solche Komponenten unterst\u00fctzten, wie wir sie heute kennen. Zu Zeiten, in denen jQuery noch der Standard der Webentwicklung war, hat man JavaScript allenfalls \u00fcber Dateien modularisiert. Das HTML der Webseiten wurde ohnehin \u00fcber L\u00f6sungen wie PHP oder JavaEE gerendert, weswegen es f\u00fcr Frontend-Komponenten gar nicht den gro\u00dfen Bedarf gab wie heute.<\/p>\n\n\n\n
W\u00e4hrend die F\u00e4higkeiten von JavaScript mit der Zeit immer weiter zunahmen, wanderte nach und nach auch immer mehr Logik vom Server in den Browser. Als schlie\u00dflich 2010 AngularJS das Licht der Welt erblickte, rollte so langsam die Welle los, auf serverseitiges Rendern vom HTML zu verzichten. Alles wurde nun im Browser gemacht. Der Server diente nur noch dazu, die statischen Assets auszuliefern und Daten hin- und herzuschicken. Mit dem Erfolg weiterer Frameworks, wie React und Vue, wurden immer mehr individuell entwickelten Webseiten nur noch browserseitig gerendert.<\/p>\n\n\n\n
Was viele sicherlich jedoch nicht wissen, ist, dass die Entwickler der Webstandards auch schon sehr fr\u00fch in diesem Prozess \u00fcber das Thema Komponenten bzw. Modularisierung nachgedacht haben. Der erste Standard in diesem Bereich, Shadow DOM v0, wurde bereits 2011 von den ersten Browsern unterst\u00fctzt. Auch wenn diese ersten Standards, Shadow DOM v0, HTML Imports und Custom Elements v0, heute schon lange durch neue und bessere Standards ersetzt wurden, sah man so sehr fr\u00fch die Bestrebungen, JavaScript zu einer vollwertigen Browser-Programmiersprache auszubauen. Und Teil dieser Bestrebungen war dann auch die M\u00f6glichkeit, Bestandteile von Webseiten mit Komponenten zu modularisieren.<\/p>\n\n\n\n
Der Begriff Web Components<\/strong> ist im Grunde eine Art Marketingbegriff. F\u00fcr sich selbst ist das kein Webstandard. Dahinter verbirgt sich ein Konzept, welches sich aus mehreren Webstandards zusammensetzt. Mit einer Web Component kannst du eigene HTML-Elemente definieren, die du wie jedes andere HTML-Element verwenden kannst. Dabei beinhaltet das neue HTML-Element alle notwendigen Teile, von eigenem HTML-Inhalt, \u00fcber Styling, bis zu JavaScript-Logik. Dabei sind die Inhalte genauso von der restlichen Webseite abgekapselt, wie zum Beispiel die interne Struktur eines Unter Web Components fallen diverse Webstandards, von denen das hier die wichtigsten sind:<\/p>\n\n\n\n Custom Elements sind die zentrale Schnittstelle, damit du aus einer JavaScript-Klasse eine Web Component machen kannst. Dazu musst du erst einmal nur zwei Dinge tun. Als Erstes leite deine Klasse von <input><\/code>-Elements.<\/p>\n\n\n\n\n
<\/span>Die wichtigsten Webstandards erkl\u00e4rt<\/span><\/h2>\n\n\n\n
Custom Elements<\/h3>\n\n\n\n
HTMLElement<\/code> ab. Als Zweites definiere f\u00fcr die Klasse ein Tag, welches im HTML verwendet werden kann. Dabei muss das Tag nach Spezifikation mindestens einen Bindestrich beinhalten, damit es keine Kollisionen mit den Standard-Tags gibt. Am besten siehst du das in dem Codebeispiel.<\/p>\n\n\n\t