Modularer Aufbau von Websites mit Web-Components
Web Components ermöglichen einen modularen Aufbau von Websites, bei dem du UI-Elemente als unabhängige Bausteine erstellst – für maximale Wiederverwendbarkeit, Wartbarkeit und Design-Kontrolle ohne zusätzliche Frameworks wie beispielsweise React oder Vue. Du erstellst dir hierbei ein eigenes HTML-Element, das von einer JavaScript-Datei gesteuert wird. Auch individuelle Inhalte an Web Components zu übergeben ist dabei standardmäßig möglich über Attribute, Properties, Slots oder JSON-Props.
Vorteile des modularen Designs
Der modulare Aufbau mit Web Components zerlegt Websites in eigenständige Teile: Custom Elements wie <mein-button> oder <site-footer> werden zentral entwickelt und per einfachem selbst definierten Tag in HTML eingebunden.
Ein sogenanntes Shadow DOM kann jeden Baustein komplett abkapseln – CSS-Stile und Inhalt bleiben isoliert, dadurch ergeben sich keine Konflikte mit anderen Modulen.
Dadurch hast du …
- Schnelle Anpassung der kompletten Website: Footer, Header, Cards oder ähnliche Elemente kannst du einmal erstellen und überall einsetzen – Änderungen sind zentral und sofort site-weit sichtbar.
- Design-Systeme: Du hast einheitliche Module für Agentur-Projekte zur Verfügung.
- Effizienz-Steigerung: Weniger Copy-Paste, kürzere Ladezeiten durch kleine, fokussierte Komponenten.
- Allerdings bedeutet das externe Kapseln des CSS im Shadow DOM auch, dass du mit CSS Custom Properties arbeiten musst, um ein globales Theming (z.B. bei dark-mode) zu erreichen.
Vergleich: Web Components vs. React vs. PHP
Web Components stehen bei ihrer modularen Arbeitsweise in Konkurrenz zu vergleichbaren Techniken wie PHP-Includes oder React. Web Components laufen nativ im Webbrowser ohne Framework-Abhängigkeit. React glänzt eher bei komplexen UIs, und PHP mit vorgefertigten serverseitigen Funktionen. Wenn du über weniger Frontenderfahrung oder Wissen über das DOM verfügst, ist evtl. React die bessere Lösung für dich. Wenn du Framework-übergreifende Komponenten brauchst, solltest du zu Web-Components greifen.
| Technik | Modularität | Vorteile | Nachteile | Wann sinnvoll? |
| Web Components | Native Bausteine, framework-frei | Kapselung per Shadow DOM, leicht wiederverwendbar über Projekte. Hohe Langzeitstabilität. | Komplex für dynamische Apps. Läuft in sehr alten Browsern nur mit Polyfills | Statische Sites, Design-Systeme, kleine Teams |
| React | Komponenten mit Virtual DOM | Weit verbreitet, effizient bei Updates | Framework-Abhängigkeit, höherer Overhead | Dynamisches Nachladen von Inhalten, große Apps |
| PHP Includes | Serverseitige Partial-Templates | Einfach, kein JS, fertiges HTML | Keine Client-Kapselung | Nutzen von vorgefertigten PHP-Funktionen |
Einen schönen Vergleich von React, Vue.js, Angular & Co findest du auf https://www.youtube.com/watch?v=xsxNzKvpBIk. Oder auch auf https://www.uxpin.com/studio/blog/react-vs-web-components/, https://blog.logrocket.com/web-components-vs-react/ und https://www.zealousys.com/blog/why-react-and-php-are-a-perfect-pair-for-web-development/.
Browserunterstützung
Web-Components haben eine ausgezeichnete Unterstützung in allen modernen Browsern (Chrome 54+, Firefox 63+, Safari 10.1+, Edge 79+), die über 98% der globalen Nutzer abdecken.
Live Demos
Schau dir dazu ein einfaches Beispiel unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/Webcomponent-01.html an. Hier habe ich einen Footer als Web-Component mit dem Element <site-footer></site-footer> in zwei HTML-Seiten eingebaut. Die Inhalte und Funktionen dieses Elements werden in der Datei footer-component.js festgelegt.
Falls der Kunde Änderungswünsche während oder nach der Projekterstellung hat, lassen sich die Inhalte des Footers auf der gesamten Website schnell aktualisieren, indem ich lediglich die zuständige Javascript Datei anpasse.
Ein etwas umfangreicheres Beispiel findest du unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/Leihinstrumente.html. Ziel bei diesem Beispiel ist es, eine Liste mit Leihinstrumenten auf diversen Seiten einer Musikschule anzeigen zu lassen. Die Liste lässt sich mit der Web-Component <instrumenten-liste data-src="./js/instrumente.json"></instrumenten-liste> an beliebigen Stellen des Webauftritts einbauen. Die Leihinstrumente werden in einer externen JSON-Datei gespeichert.
Literaturhinweise
- Gutes englischsprachiges Tutorial von Web Dev Simplified: „Learn Web Components In 25 Minutes“ auf https://www.youtube.com/watch?v=2I7uX8m0Ta0
- Tutorial von Traversy Media: https://www.youtube.com/watch?v=PCWaFLy3VUo
- Einführung auf CSS-Tricks: https://css-tricks.com/an-introduction-to-web-components/
- Weitere Infos unter https://www.ionos.de/digitalguide/websites/web-entwicklung/web-components/ oder https://kinsta.com/de/blog/web-komponenten/
