Wir alle haben Projekte, an denen wir lieber nicht arbeiten w\u00fcrden. Der Code ist un\u00fcberschaubar geworden, der Umfang hat sich entwickelt, schnelle Korrekturen wurden auf andere Korrekturen angewandt und die Struktur ist unter dem Gewicht des Spaghetticodes zusammengebrochen. Coding kann eine chaotische Angelegenheit sein.<\/p>\n
Projekte profitieren von der Verwendung einfacher, unabh\u00e4ngiger Module, die eine einzige Verantwortung haben. Modularer Code ist gekapselt, so dass man sich weniger Gedanken \u00fcber die Implementierung machen muss. Solange du wei\u00dft, was ein Modul ausgibt, wenn es eine Reihe von Eingaben erh\u00e4lt, musst du nicht unbedingt verstehen, wie es dieses Ziel erreicht.<\/p>\n
Die Anwendung von modularen Konzepten auf eine einzelne Programmiersprache<\/a> ist einfach, aber die Webentwicklung erfordert eine vielf\u00e4ltige Mischung von Technologien. Browser<\/a> analysieren HTML<\/a>, CSS und JavaScript, um den Inhalt, die Stile und die Funktionalit\u00e4t der Seite darzustellen.<\/p>\n Sie lassen sich nicht immer leicht mischen, denn:<\/p>\n Diese Probleme treten zus\u00e4tzlich zu denen auf, die durch Sprachlaufzeiten, Frameworks<\/a>, Datenbanken und andere auf dem Server verwendete Abh\u00e4ngigkeiten entstehen.<\/p>\n Eine Webkomponente ist eine M\u00f6glichkeit, einen gekapselten Codeblock mit einer einzigen Verantwortlichkeit zu erstellen, der auf jeder Seite wiederverwendet werden kann.<\/p>\n Betrachte den HTML Styling und Funktionalit\u00e4t sind vorgegeben, obwohl du mit verschiedenen Attributen und JavaScript API-Aufrufen Modifikationen vornehmen kannst. Eine beliebige Anzahl von Was ist, wenn du deine eigene Funktionalit\u00e4t ben\u00f6tigst? Zum Beispiel ein Element, das die Anzahl der W\u00f6rter auf der Seite anzeigt? Es gibt (noch) kein HTML Frameworks wie React<\/a> und Vue.js<\/a> erlauben es Entwicklern, Webkomponenten zu erstellen, bei denen der Inhalt, das Styling und die Funktionalit\u00e4t in einer einzigen JavaScript-Datei definiert werden k\u00f6nnen. Diese l\u00f6sen viele komplexe Programmierprobleme, aber bedenke, dass:<\/p>\n Gl\u00fccklicherweise finden beliebte Konzepte, die in Bibliotheken und Frameworks eingef\u00fchrt werden, ihren Weg in die Webstandards. Es hat einige Zeit gedauert, aber Web Components sind angekommen.<\/p>\n Nach vielen herstellerspezifischen Fehlstarts wurde das Konzept der Standard Web Components erstmals von Alex Russell auf der Fronteers Conference 2011<\/a> vorgestellt. Googles Polymer-Bibliothek<\/a> (ein Polyfill, das auf den aktuellen Vorschl\u00e4gen basiert) kam zwei Jahre sp\u00e4ter, aber fr\u00fche Implementierungen erschienen erst 2016 in Chrome und Safari.<\/p>\n Die Browserhersteller brauchten Zeit, um die Details auszuhandeln, aber die Web Components wurden 2018 in Firefox und 2020 in Edge hinzugef\u00fcgt (als Microsoft auf die Chromium-Engine umstieg).<\/p>\n Verst\u00e4ndlicherweise waren nur wenige Entwickler bereit oder in der Lage, Web Components zu \u00fcbernehmen, aber wir haben endlich ein gutes Niveau an Browser Support mit stabilen APIs erreicht. Nicht alles ist perfekt, aber sie sind eine zunehmend brauchbare Alternative zu Framework-basierten Komponenten.<\/p>\n Selbst wenn du noch nicht bereit bist, deinen Favoriten aufzugeben, sind Web Components mit jedem Framework kompatibel und die APIs werden auch in den n\u00e4chsten Jahren unterst\u00fctzt.<\/p>\n Es gibt Repositories mit vorgefertigten Web Components, die jeder ausprobieren kann:<\/p>\n …aber es macht mehr Spa\u00df, seinen eigenen Code zu schreiben!<\/p>\n Dieses Tutorial bietet eine komplette Einleitung in Web Components, die ohne ein JavaScript-Framework geschrieben wurden. Du wirst lernen, was sie sind und wie du sie f\u00fcr deine Webprojekte anpassen kannst. Du wirst einige Kenntnisse in HTML5<\/a>, CSS und JavaScript ben\u00f6tigen.<\/p>\n Web Components sind benutzerdefinierte HTML-Elemente wie z.B. Du musst eine ES2015-Klasse definieren, um das Element zu steuern. Es kann beliebig benannt werden, aber HelloWorld ist g\u00e4ngige Praxis. Es muss das HTMLElement Interface<\/a> erweitern, welches die Standardeigenschaften und -methoden jedes HTML-Elements repr\u00e4sentiert.<\/p>\n\n
Schau dir unseren Video-Leitfaden<\/a> zu Webkomponenten an<\/h3>\n
\nWas sind Webkomponenten?<\/h2>\n
<video><\/code><\/strong> Tag. Anhand einer URL<\/a> kann ein Betrachter Steuerelemente wie Abspielen, Pause, Zur\u00fcckgehen, Vorw\u00e4rtsgehen und Einstellen der Lautst\u00e4rke verwenden.<\/p>\n<video><\/code><\/strong>-Elementen kann innerhalb anderer Tags platziert werden, und sie werden nicht in Konflikt geraten.<\/p>\n<wordcount><\/code><\/strong> Tag.<\/p>\n\n
Eine kurze Geschichte der Web Components<\/h2>\n
\n
Erste Schritte mit Web Components<\/h2>\n
<hello-world><\/hello-world><\/code><\/strong>. Der Name muss einen Bindestrich enthalten, um nicht mit Elementen zu kollidieren, die offiziell von der HTML-Spezifikation unterst\u00fctzt werden.<\/p>\n