Webkomponenten: So erstellen Sie benutzerdefinierte HTML-Elemente mit Javascript

1. Einführung: Hallo und willkommen zu diesem Kurs über Webkomponenten, Ihrem Leitfaden zum Erstellen benutzerdefinierter HTML-Elemente mit JavaScript. Ich bin Christopher Dodd. Ich bin freiberuflicher Webentwickler und Top-Lehrer hier auf SkillShare.com, alles über Webentwicklung und Online-Freelancing abdeckt . In der heutigen Klasse werden wir mehr über die vier Spezifikationen erfahren, aus denen die Webkomponenten, die Meta-Spezifikation bestehen, und wie wir diese verwenden können, um neue benutzerdefinierte und wiederverwendbare HTML-Tags für zu erstellen verwenden Sie in Webseiten und Web-Apps. Für diejenigen unter Ihnen , die Erfahrung mit JavaScript zu programmieren, kann das Erlernen, wie Sie benutzerdefinierte Elemente für Ihre Web-Apps und Websites erstellen Elemente für Ihre Web-Apps und , ein nützliches Werkzeug zum Kapseln von Funktionen sein , ein nützliches Werkzeug zum Kapseln von Funktionen und wir verwenden es überall in einem bestimmten Projekt oder über mehrere Projekte hinweg. Wenn Sie bereit sind zu lernen, wie Sie Ihre eigenen benutzerdefinierten HTML-Elemente mit JavaScript erstellen , klicken Sie auf das nächste Video und wir sehen uns auf der Innenseite. 2. Web-Komponenten – Ein Beispiel für das echte Leben: Web Components war etwas , das auf meinem Radar auftauchte angesichts meiner Arbeit mit Shopify-betriebenen E-Commerce-Websites. Es war Juni 2021, als Shopify enthüllte, dass ihr Standardthema aktualisiert wurde um den Großteil der JavaScript-Logik in rund 20 verschiedene Webkomponenten wie Modals, Menge, Eingaben, einzukapseln in rund 20 verschiedene Webkomponenten wie Modals, , und vieles mehr. Sie haben sogar eine eigene Schiebereglerkomponente erstellt keine externen JavaScript-Bibliotheken benötigt. Obwohl ich keine Aussagen von Shopify finden konnte , warum sie sich entschieden haben, ihre neuen Online-Shops 2.0-Themes wie diese zu erstellen , vertraue ich darauf, dass, wenn Webkomponenten wie Shopify, ein Multi-Milliarden-Dollar-Tech-Unternehmen wollte die Logik seiner selbst entwickelten Themen strukturieren, dann war dies eine Spezifikation, die man beachten und mehr darüber erfahren sollte. einer E-Commerce-Website die normalerweise auf Shopify gehostet wird, kann erwartet werden , dass sie über Webkomponenten gekapselt werden kann . Um das Dawn-Thema von Shopify als Beispiel zu verwenden, wichtige Interaktivitätspunkte wie die Artikeltabelle auf der Warenkorbseite, die Optionen zum Filtern von Produkten innerhalb einer Sammlung und das Produktformular, sind alle Bereiche, in denen Funktionen in separaten Webkomponenten gebündelt werden können . Am Ende dieses Kurses werden wir Shopifys Beispiel als Inspiration nehmen, um unsere eigene Warenkorb-Funktionalität zu erstellen unsere eigene Warenkorb-Funktionalität aus drei separaten Komponenten besteht, mit denen alle interagieren einander. Aber bevor wir dort ankommen, müssen wir ein tieferes Verständnis der Theorie hinter Webkomponenten erlangen ein tieferes Verständnis der . Beginnend mit einer Übersicht über die vier Webkomponentenspezifikationen. 3. Die 4 Web: Für diese spezielle Lektion werde ich auf die Website verweisen , die Entwicklern hilft, Webkomponenten zu teilen, zu entdecken und wiederzuverwenden, web components.org. Wenn Sie also zu irgendeinem Zeitpunkt in Bezug auf die folgende Theorie verloren sind, können Sie einfach unter web components.org/specs nachschauen , um weiterzuverfolgen. Wie hier auf web components.org geschrieben, handelt es Webkomponenten um eine Meta-Spezifikation , die durch vier weitere Spezifikationen ermöglicht wird . Die Spezifikation der benutzerdefinierten Elemente, die Shadow DOM-Spezifikation, die HTML-Vorlagenspezifikation und die ES-Modulspezifikation. In dieser Lektion werden wir alle diese Spezifikationen aus theoretischer Sicht kurz behandeln diese Spezifikationen aus theoretischer Sicht und in den nächsten Videos werden wir uns jede Spezifikation in der Praxis ansehen. Fangen wir mit benutzerdefinierten Elementen an. Die Spezifikation der benutzerdefinierten Elemente ist die grundlegende Spezifikation, die Webkomponenten ermöglicht. Mit dieser define-Methode für das benutzerdefinierte Element-Objekt können wir ein neues benutzerdefiniertes Element definieren. Das erste Argument ist der Name des benutzerdefinierten Elements, das wir verwenden, um es innerhalb des HTML aufzurufen. Der zweite Parameter ist der Konstruktor, in den die gesamte Logik hingehen wird. Wir können diese konstruierte Klasse erstellen indem wir die HTML-Elementklasse oder eine vorhandene native HTML-Elementklasse wie im Beispiel hier erweitern oder eine vorhandene native HTML-Elementklasse , aber wir werden etwas später darauf zugreifen. Die meiste Zeit erweitern Sie die reguläre HTML-Elementklasse, um Ihre Komponenten zu erstellen. Dies wird als anonymisiertes benutzerdefiniertes Element bezeichnet. Hier haben wir Zugriff auf die Komponente, wie sie im DOM existiert, über das mächtige Schlüsselwort, dieses Schlüsselwort. Jedes Mal, wenn wir das benutzerdefinierte Element in unserem HTML verwenden, wird eine Instanz erstellt und wir können dann Code innerhalb dieser Klassendeklaration schreiben , der sich speziell auf die jeweilige Instanz der Komponente bezieht . Die nächste Spezifikation ist das Shadow-DOM, dem Sie ein separates DOM für das reguläre DOM erstellen können. Das reguläre DOM wird daher manchmal als das helle DOM bezeichnet, um es zu unterscheiden, wenn es über die Alternative spricht, die das Schatten-DOM ist. Die Shadow-DOM-API ermöglicht es Ihnen, einen DOM-Teilbaum an Elemente in Ihrem Webdokument anzuhängen . Das angehängte Schatten-DOM ist gekapselt, was bedeutet, dass die darin enthaltenen Stilinformationen nicht auf äußere Elemente gelten können und umgekehrt. Wir können das Schatten-DOM über die angehängte Shadow-Methode an jedes Element anhängen. Im Kontext des Aufbaus von Webkomponenten wird das Shadow-DOM in der Regel direkt in der Webkomponente selbst mit this.AttachShadow erstellt . Mit diesem Schattenwurzelobjekt können wir einen Teilbaum von Elementen erstellen, alle für das Hauptlicht-DOM praktisch unsichtbar sind . Lassen Sie uns als Nächstes über die Spezifikation der HTML-Vorlage sprechen. Dies ist einfach eine Möglichkeit für uns, eine HTML-Struktur zu erstellen , die nicht wie normales HTML gerendert wird . Wir erstellen eine Vorlage über das Template-Tag, platzieren unseren HTML-Code darin und wenn die Seite geladen wird, wird der HTML-Code nicht gerendert, aber es ist immer noch über JavaScript zugänglich. Wie der Name schon sagt, können wir diese Tags verwenden, um Vorlagencode zu erstellen , der geklont und an mehreren Orten verwendet werden kann . Im Zusammenhang mit dem Erstellen einer Webkomponente kann das Template-Tag verwendet werden, um den HTML-Code der Komponente zu definieren , indem der HTML-Code innerhalb der Tags geklont und entweder direkt im inneren HTML von die Komponente oder in ihr Schatten-DOM. Schließlich definiert die ES-Modulspezifikation die Aufnahme und Verwendung von JS-Dokumenten in andere JS-Dokumente. Obwohl es für den Aufbau von Webkomponenten nicht unerlässlich ist, Speichern Ihrer Webkomponenten als das Speichern Ihrer Webkomponenten als modularem Code, der in einer eigenen JS-Datei vorhanden ist kann das Speichern Ihrer Webkomponenten als modularem Code, der in einer eigenen JS-Datei vorhanden ist, für die Projektstrukturierung nützlich sein, insbesondere wenn Sie Dritte einbringen Web-Komponenten. Die Syntax für die Spezifikation besteht darin, Ihr externes Skript wie gewohnt zu importieren, außer dass Sie dieses Mal das Modul als Typparameter festlegen. Dann schreiben Sie Eingabe gefolgt vom Pfad zur Datei. Die Funktionen der Spezifikation für benutzerdefinierte Elemente, die Shadow-DOM-Spezifikation, die HTML-Vorlagenspezifikation und die ES-Modulspezifikation funktionieren gut zusammen, um uns beim sauberen Schreiben zu helfen, gekapselte und wiederverwendbare benutzerdefinierte HTML-Elemente. Theoretisch ist es nur die Spezifikation für benutzerdefinierte Elemente , die zum Erstellen benutzerdefinierter Elemente erforderlich ist, aber wie Sie in späteren Videos sehen werden, ist das Kombinieren von Funktionen aus jeder Spezifikation oft der beste Weg, um das Beste aus Webkomponenten herauszuholen. 4. Benutzerdefinierte Elemente Teil 1: wir nun die vier Webkomponentenspezifikationen im letzten Video behandelt haben , schauen wir uns diese ausführlich und in Aktion in unserem Code-Editor an. Was ich mache, ist ein brandneues Projekt zu starten. Ich habe hier einen Ordner für meinen Code. Ich erstelle einen neuen Projektordner und nenne ihn Webkomponenten. Du kannst es nennen, wie immer du willst. Dann ziehe ich das in meinen Code-Editor, nämlich Visual Studio Code, und dieser öffnet diesen Ordner automatisch für uns. Ich schließe das dann, klicke hier auf neue Datei und erstelle eine HTML-Datei. Wir nennen es index.html. jetzt Emmet in Visual Studio Code verwende, kann ich etwas Boilerplate-HTML ausgeben indem ich Ausrufezeichen eintippe und dann auf „Enter“ klicke. Ich ändere den Titel hier nur in Webkomponenten. Dann erstelle ich die JavaScript-Datei, ich nenne sie component.js weil wir zuerst mit einer einzigen Komponente arbeiten werden . Ich mache die klassische Hallo Welt für unsere Konsole. Gehen Sie zurück zu hier und dann letzte Änderung, die ich vornehmen muss, um zu beginnen, besteht darin, diese JavaScript-Datei tatsächlich zu verknüpfen. Da sind wir los. Jetzt gehe ich zurück zu unserem Ordner und lass uns das in Google Chrome öffnen. Es ist Google Chrome für mich, aber Sie können jeden beliebigen Browser verwenden. Ich werde die Befehlsoption I verwenden, um meine Entwicklertools hier zu öffnen, und wenn ich zur Konsole gehe, werde ich das einfach für euch größer machen, ihr könnt Hallo Welt sehen, was uns das zeigt wir verknüpfen die JavaScript-Datei , die wir hier erstellt haben, korrekt. Großartig. Nachdem das erledigt ist, erstellen wir tatsächlich unsere erste Webkomponente. Auch hier gibt es ein paar Boilerplate. Alles, was wir tun müssen, und das wird für jede Webkomponente gleich sein, abgesehen von den integrierten benutzerdefinierten Komponenten, die wir uns später ansehen werden, werde ich diese Webkomponente einfach aufrufen und wie Sie hier sehen können, der erste Buchstabe jedes der Wörter in diesem Klassennamen hier großgeschrieben. Das ist die Konvention, die wir verwenden. Dann tippen wir erweiterte und dann HTML-Elemente ein. Dann brauchen wir hier drin einen Konstruktor. Dann rufen wir die Superfunktion auf, die wir jedes Mal aufrufen werden, wenn wir eine Webkomponente erstellen , und im Grunde genommen erbt dies die konstruktiven Funktionen der Klasse, die sie ist sich ausdehnen. Wir brauchen das, um das zu nutzen , was wir hier erweitern. Dann gehen wir hier runter und beenden dies indem wir die define-Methode für benutzerdefinierte Elemente ausführen. Der erste Parameter wird sein, wie der Elementname in unserem HTML-Dokument aussehen wird , und dann ist das zweite Argument der Klassenname, den wir gerade hier erstellt haben. Dort haben wir es, unsere erste Webkomponente. Um das jetzt auf unser Frontend zu bringen und es in unserem HTML auszuführen, haben wir gerade dieses benutzerdefinierte Tag, Webkomponente, zur Verfügung. Das entspricht natürlich dem, was wir hier in dieser Define-Methode gesagt haben. Vielleicht laufe ich diese Seite an Seite. Los geht's. Um zu überprüfen, ob diese Webkomponente erstellt und auf der Seite ausgeführt wird , stelle ich hier ein Konsolenprotokoll ein und tippe einfach wieder Hello World ein. Gehen wir zurück zu unserem HTML-Dokument, aktualisieren die Seite und Sie können sehen die Hello World Konsolenprotokollierung ist. Wenn wir auf unserer Seite hier nachschauen, können Sie sehen, dass wir dieses benutzerdefinierte Element aufgerufen haben. Bisher scheint dies keine praktische Verwendung zu sein aber während wir diesen Kurs durchlaufen, werden Sie sehen, wie Webkomponenten bestimmte Funktionen für bestimmte Elemente hier einkapseln . Eine der Möglichkeiten, wie wir das sehen können, ist die Verwendung des Schlüsselworts, dieses. Wenn ich dies einfach in ein HTML- und Konsolenprotokoll eintippe, können wir auf alles verweisen, was wir zwischen diesen Tags setzen. Ich werde die Hallo Welt dorthin bringen. Lass uns wieder hier rüber gehen, aktualisieren. Sie können sehen, dass wir einige Inhalte zwischen diesen Webkomponenten-Tags haben, und das wird dann auch hier in unserer Konsole wiedergegeben. Das zeigt Ihnen nur, dass wir die Webkomponente selbst als Referenz verwenden und dann Dinge innerhalb dieser Komponente tun können selbst als Referenz verwenden , die wir in Kürze sehen werden. Das ist unsere grundlegende Webkomponente. Lassen Sie mich Ihnen als Nächstes zeigen, wie wir inneres HTML in unserer Webkomponente erstellen können . Ich mache dies innerhalb der Konstruktormethode, da dies der Konstruktormethode, da immer dann ausgeführt wird, wenn die Komponente konstruiert wird. Ich schreibe hier ein paar Kommentare. Die erste Methode besteht darin , einfach den inneren HTML einzustellen . Das schreibe ich auf. Wir können diesen inneren HTML genau wie zuvor ausführen und anstatt es auszugeben, können wir es überschreiben. Ich verwende hier die Back-Ticks, damit ich kein Problem mit Anführungszeichen habe , sei es doppelte Anführungszeichen oder einfache Anführungszeichen. Was ich tun werde, ist ein div zu erstellen und innerhalb des Divs eine Spanne zu erstellen, und dann werde ich sagen, dass dies eine Webkomponente ist. Wenn ich hier aktualisiere und dann dieses Element inspiziere, kannst du sehen, dass wir diesen HTML-Code in die Webkomponente eingefügt haben . Die zweite Möglichkeit, dies zu tun, besteht darin Elemente zu erstellen und sie zum DOM hinzuzufügen. Ich zeige dir, wie wir das jetzt machen. Lassen Sie uns das kommentieren und ich zeige Ihnen die zweite Option hier. Lasst uns das einfach übergehen, damit wir mehr davon sehen können. Vergrößern Sie möglicherweise die Bildschirmgröße. Da sind wir los. Was ich dann tun werde, ist document create element zu verwenden und wir können den Elementnamen hier buchstäblich eingeben , um ein Element zu erstellen. Aber wir müssen es irgendwo aufbewahren, also stelle ich ein const div vor. Dadurch wird das neu erstellte div-Element in dieser div-Konstante gespeichert . Dann erstelle ich die Spanne, die wir zuvor hatten. Ich erstelle genau das Gleiche wie hier oben. Das Dokument erstellt eine Elementspanne. Dann haben wir jetzt unser div und unsere Spanne. Bevor ich das div an unser Dokument anfüge, aktualisiere ich den inneren HTML der Spanne auf das, was wir zuvor hatten, dies ist eine Webkomponente. Was ich dann tun kann, ist diese Append-Child-Methoden zu verwenden diese Append-Child-Methoden , um das DOM im Grunde zu konstruieren. Ich kann die Spanne innerhalb des div verschachteln, und dann kann ich das Div in der Webkomponente selbst verschachteln, so. Wenn ich jetzt wieder hierher gehe, haben wir ein kleines Problem. Dieses Problem ist, dass wir Inhalte hier einbringen. Ich werde das einfach entfernen, speichere das auf. Wenn wir zurückgehen, gehen Sie los, wir werden div mit der Spanne im Inneren bekommen. Das ist eine andere Art, dies zu tun. Der letzte Weg, dies zu tun, besteht darin, eine HTML-Zeichenfolge zu analysieren. Ich werde das kommentieren und dann schreibe ich den dritten Kommentar, analysiere eine HTML-Zeichenfolge. Sagen wir zum Beispiel, in einer bestimmten Situation hatte ich eine HTML-Zeichenfolge und wollte die HTML-Zeichenfolge als HTML in diese Webkomponente einfügen . Lasst uns das einfach nochmal herstellen. Das Gleiche nochmal, div mit einer Spanne innen, das ist eine Webkomponente, schließe die Spanne, schließe das div. Was ich dann tun muss, weil dies eine Zeichenfolge ist, muss ich sie analysieren. Ich kann es analysieren, indem ich den DOM-Parser verwende. Schauen wir uns das jetzt an. Ich kann const inneres HTML auf einen neuen DOM-Parser setzen und dann die Parse von der String-Methode ausführen, die die HTML-Zeichenfolge als erstes Argument verwendet. Dann das Format text/HTML. Was das dann tun wird, ist, dass es mir dieses analysierte DOM geben wird. Was ich tun muss, ist tatsächlich den Körper zu finden und dann den inneren HTML-Code davon abzuholen. Ich erstelle im Grunde ein neues DOM mit dieser HTML-Zeichenfolge und nehme dann den inneren HTML des Körpers von diesem neuen DOM ab. Was ich dann einfach tun kann, ist zu sagen, dass dieser innere HTML dem inneren HTML entspricht. Da es sich um die Webkomponente handelt, setze ich den HTML-Code der Webkomponente auf den inneren HTML-Code dieser geparsten HTML-Zeichenfolge. Alles scheint gut zu sein. Aktualisieren Sie hier drüben und wir erhalten genau das gleiche Ergebnis. Jetzt wird Ihnen nicht sofort klar sein, warum Sie drei verschiedene Methoden verwenden müssen oder welche Methode Sie verwenden möchten. Verwenden Sie die Methode, die für Sie funktioniert, wenn dies die einfachste ist und Sie damit davonkommen können, verwenden Sie diese auf jeden Fall. Aber es gibt bestimmte Situationen, in denen Sie möglicherweise HTML von einer API zurückgeben, was in Shopify-Themes der Fall ist, dann müssen Sie diese DOM-Parser-Methode verwenden, oder vielleicht erhält es eine etwas kompliziert beim Erstellen neuer Elemente, die in eine komplexere HTML-Struktur passen eine komplexere HTML-Struktur In diesem Fall sollten Sie diese Methode verwenden. In diesem einfachen Beispiel scheint dies der einfachste Weg zu sein, was es ist. Da die Beispiele jedoch komplexer werden, müssen Sie möglicherweise eine Kombination aus diesem oder diesem verwenden . Was ich in diesem kleinen Abschnitt machen wollte war dir zu zeigen, wie du das kannst. Das nächste, was ich Ihnen zeigen möchte, sind benutzerdefinierte Attribute. Ich werde das alles los. Keine Sorge, dies befindet sich alles im GitHub-Link, sodass Sie sich diesen Code wann immer Sie möchten ansehen können. Was ich Ihnen jetzt zeigen möchte, ist, dass wir tatsächlich unsere eigenen benutzerdefinierten Attribute erstellen können . Hier in diesem Webkomponenten-Tag könnte ich etwas wie Text oder einen beliebigen Parameter eingeben , den ich durchsetzen wollte. Sagen wir einfach, dies ist eine Webkomponente. Ich habe einen Parameter mit dem Namen Text und ich analysiere das als Wert. Wie benutzen wir das? Nun, ich werde das schließen. Was ich tun werde, ist über this.getAttribute auf dieses Attribut zuzugreifen . Dann ist das Argument dafür der Attributname selbst, der Text ist. Lassen Sie uns das einfach konsolenprotokollieren , um loszulegen. Dann finden wir eine praktischere Verwendung davon. hier aktualisiert werde, wenn ich in die Konsole gehe, können Sie sehen, dass dies eine Webkomponente ist, die dem Parameter entspricht, den ich hier durchgesetzt habe. Das ist bisher nicht sehr hilfreich. Was ich tun werde, ist Nummer 1, ich setze das in eine Variable ein. Ich erstelle eine Variable innerhalb dieser Komponente füge sie also an diese an. Ich nenne es inneren Textinhalt. Aber bevor ich das mache, möchte ich prüfen, ob dieses Element tatsächlich dieses Attribut hat. Ich verwende die hat-Attribut-Methode die hat-Attribut-Methode die Text als Attributnamen durchsucht. Dann lege ich das in den If-Block dort. Auch hier sollte das funktionieren. Hier gibt es keine Fehler, es gibt kein Konsolenprotokoll, aber das liegt daran, dass wir noch nichts protokolliert oder etwas geändert haben. Was ich hier machen könnte, ist genau wie zuvor, verwende die Methode, die wir vor dieser einfachen Methode hatten , einfach den inneren HTML einzustellen. Was ich tun werde, ist dieselbe Struktur erneut mit dem div und der verschachtelten Spanne zu verwenden dieselbe Struktur erneut mit . Aber in der verschachtelten Spanne werde ich einen dynamischen Wert angeben, werde ich einen der auf diesem Attribut basiert . Da wir diese Variable genau hier setzen, werde ich das hier hier hineinlegen this.InnerTextContent. Dann aktualisiere hier drüben. Sie können sehen, dass wir das gleiche Ergebnis haben wie zuvor. Gehen wir zurück in unser HTML. Wenn ich das ändern sollte, ist dies eine Komponente. Das wird in die Spanne geschickt. Nun ist das einzige Problem dabei, wenn wir wieder hier reingehen und sagen wir, wir haben eine ziemlich dynamische Webkomponente hier eine ziemlich dynamische Webkomponente, in der sich dieser Wert ändern wird. Wenn ich das ändere, ist dies wiederum eine Webkomponente, nur keine Komponente. Sie werden sehen, dass nichts aktualisiert wird. liegt daran, dass wir tatsächlich auf Änderungen an Attributen achten müssen, damit sich dies tatsächlich ändert. Zurück zur Datei component.js werden wir im nächsten Abschnitt mehr über Lebenszyklusmethoden sprechen . Aber im Moment zeige ich Ihnen die Lebenszyklusmethode, mit der wir nach Attributänderungen suchen können. Hier hat unser rechtes Attribut den Callback geändert, und es braucht drei Argumente. Der erste ist der Attributname selbst. Ich sage den attr-Namen. Das zweite Attribut ist der alte Wert, und das dritte Attribut ist der neue Wert, der Wert, in den es geändert wird. Dann stelle ich es hier in einen Scheck. Wenn der atrr-Name Text ist , aktualisieren wir den inneren HTML-Code. Behalte diese Struktur bei. Anstelle dieses inneren Textinhalts setzen wir diesen auf den neuen Wert, der im Callback durchkommt. Das mag der letzte Schritt sein, aber es gibt noch einen weiteren Schritt, den wir tun müssen, nämlich die Webkomponente anzuweisen , auf dieses bestimmte Attribut zu achten. Dies ist nur eine Möglichkeit für Webkomponenten, schlanker zu sein und sicherzustellen , dass sie keine Attribute überprüfen , die für den Programmierer keine Rolle spielen . Was wir dafür tun müssen, ist einfach statisch einzugeben, beobachtete Attribute zu erhalten. Dann geben wir einfach ein Array mit allen Attributen zurück , die wir sehen möchten, nämlich nur Text. Gehen wir hier zu unserem Browser, aktualisieren. Wir haben einen Syntaxfehler. Das liegt daran, dass ich das außerhalb des Konstruktors stellen muss. Dies ist die Konstruktormethode genau hier. Ich muss das rausstellen und hier auffrischen. Das sollte funktionieren. Keine Fehler. Wenn ich hier hineingehe und mich ändere, ist dies eine Komponente, die eine Webkomponente oder irgendetwas anderes ist , können Sie sehen, dass sich das innere HTML geändert hat. Wir haben diese Methode hier erfolgreich ausgeführt, da wir nach beobachteten Attributen mit dem Namen Text suchen. Wir prüfen, ob der Attributname, durch diesen Callback kommt, Text ist, und wenn ja, aktualisieren wir das innere HTML auf diese neue HTML-Struktur mit dem neuen Wert. Wir haben bereits einiges mit der Spezifikation für benutzerdefinierte Elemente behandelt . Ich werde die zweite Hälfte dieses Videos in einen Teil 2 aufteilen . Im nächsten Teil werden wir uns Lebenszyklusmethoden und benutzerdefinierte Ereignisse ansehen . 5. Benutzerdefinierte Elemente Teil 2: In diesem Video in Teil 2, dem die Funktionen der Spezifikation für benutzerdefinierte Elemente diskutiert werden, werden wir über Lebenszyklusmethoden und benutzerdefinierte Elemente sprechen . Im letzten Video haben wir tatsächlich eine dieser Lebenszyklusmethoden gesehen , den Rückruf der Attributänderung. Ich werde das als Nummer 3 eintragen, worüber wir in nur einer Sekunde sprechen werden. Ein bisschen Haftungsausschluss hier, ich werde Konstruktor Nummer 1 hier betrachten , obwohl es technisch gesehen keine Lebenszyklusmethode ist, aber es hilft, den Konstruktor im Kontext des Lebens zu betrachten . Zyklusmethoden sowieso Hier gibt es eine zweite, die ich in Kürze verraten werde, und einen vierten , den ich hier verraten werde. Sprechen wir zuerst über den Konstruktor. Der Konstruktor, ich schreibe hier welche und ich lege das in GitHub für euch, damit ihr später darauf verweisen könnt. Lasst mich diesen Tippfehler beheben. Dies wird ausgeführt, wenn die Komponente im Speicher erstellt, aber noch nicht unbedingt an das DOM angehängt wird . Laut meinen Recherchen ist dies der beste Ort für die Initialisierung, aber nicht der beste Ort für die Interaktion mit dem DOM. Jetzt ist der Unterschied zwischen dem Konstruktor und dem nächsten ziemlich subtil. Aber wenn Sie jemals Probleme damit haben, etwas in diese Konstruktorfunktion zu stecken und es nicht funktioniert, ist der nächste wahrscheinlich der Ort, an dem Sie es platzieren müssen, und dieser ist der verbundene Callback. Ich tippe das hier ein, verbundener Callback. Das wird ausgeführt, wenn das Element tatsächlich an das DOM angehängt ist. Es sieht genau so aus, verbundener Callback. Dieser dritte, wie wir zuvor gesehen haben, Attribut Changed-Callback einfach, ob sich überprüft das Attribut Changed-Callback einfach, ob sich ein Attribut geändert hat. Ziemlich einfach zu verstehen. Dieser vierte, den wir uns ansehen werden ist der getrennte Callback, der das vollständige Gegenteil des verbundenen Callbacks ist. Dies läuft, wenn das Element vom DOM getrennt ist. Du denkst vielleicht, warum brauchen wir das? Es ist nützlich, um Bereinigungen durchzuführen, also Prozesse, die wir nicht mehr ausführen möchten, sobald wir sie losgeworden sind. Es sieht genauso aus wie der verbundene Callback außer dass es sich um einen getrennten Callback handelt. Es gibt ein oder zwei weitere, aber das sind die wichtigsten. Wir haben einen Konstruktor gesehen, wir haben Rückruf von Attributänderungen gesehen. Die beiden, die wir noch nicht angeschaut haben, bis dieses Video verbunden und getrennt wurde. Was ich hier machen werde, ist ein paar Konsolenprotokolle zu erstellen und dann kann ich Ihnen zeigen, wie es aussieht , wenn ein verbundener Callback ausgeführt wird und der getrennte Callback ausgeführt wird. Alles, was ich tun werde, ist verbundener Callback zu sagen und dann rechts hier rein zu schreiben, getrennter Callback. Wenn ich diesen Code jetzt ausführe, wenn ich in meine Konsole gehe, aktualisiere die Seite, du kannst sehen, dass der verbundene Callback ausgeführt wird. Wenn ich hier ein Konsolenprotokoll einfüge und sagen wir einen Konstruktor, und dann laufen wir hier rüber, können Sie sehen, dass der Konstruktor und der verbundene Callback ausgeführt wird. Hier passiert der subtile Unterschied zwischen Konstruktor und verbundenem Callback. verbundene Callback ist technisch gesehen, wenn das Element an das DOM angehängt wird und der Konstruktor im Speicher erstellt wird. Aber die beiden passieren automatisch sobald wir diese Komponente in unser Dokument eingefügt haben. Wie kann ich Ihnen den Unterschied zwischen verbundenem Callback und Konstruktor demonstrieren ? Nun, eine der Möglichkeiten, wie ich Ihnen dies zeigen kann, besteht darin, diese Webkomponente programmgesteuert aus dem DOM zu entfernen , immer noch in einem Speicher zu haben und sie dann wieder zu verbinden. Das mache ich in diesem Beispiel genau hier. Direkt über dem Komponenten-JS-Skripttag erstelle ich ein weiteres Skript-Tag. Was ich tun werde, ist die Webkomponente selbst in den Griff zu bekommen. Ich erstelle eine variable Webkomponente, und dann verwenden wir den Dokumentabfrage-Selektor um das Webkomponentenelement zu erfassen. Genau wie bei jedem anderen Element können wir dies auch mit unseren eigenen benutzerdefinierten Elementen tun. Was ich dann tun werde, ist, dies nur auf Timeout für die Zwecke dieses Beispiels zu stützen . Ich erstelle diese Timeout-Funktion. Lass es uns nach einer Sekunde laufen. Dann werde ich innerhalb der Timeout-Funktion das Kind im Dokumententext entfernen und das HTML der Webkomponente aus dem Dokumententext entfernen, nur um es erneut anzuhängen. documentBody.append untergeordnete Webkomponente. Im Grunde genommen wird dies nur getan, nachdem eine Sekunde dieser Seite geladen wurde, werden wir diese Webkomponente aus dem Körper entfernen , auf dem sie sich gerade befindet, und sie wieder in den Körper legen. Lasst uns hier auffrischen und eine Sekunde warten. Sie können sehen, dass die Konstruktorfunktion einmal ausgeführt , da die Webkomponente einmal im Speicher erstellt wird. Dann geschieht der verbundene Callback natürlich ziemlich gleichzeitig mit dem Konstruktor. Aber was wir dann nach einer Sekunde sehen, wenn ich das nach einer Sekunde erneut ausführe, was der Parameter ist, den wir hier für das Timeout setzen, werden Sie sehen, dass der getrennte Callback ausgeführt wird, weil wir entfernen eine Webkomponente aus dem DOM und dann setzen wir sie zurück damit der verbundene Callback wieder ausgeführt wird. Hier sehen Sie den subtilen Unterschied zwischen dem Erstellen des Speichers des Konstruktors und der Interaktion der Webkomponente mit dem DOM. Oft passiert es gleichzeitig. Wenn wir jedoch die Webkomponente nehmen und in unserem DOM verschieben würden , verbundener Callback und getrennter Callback nützlich. Wir haben dort zwei in einem demonstriert. Aber wenn wir hierher zurückkehren und ich hier tatsächlich in den Elementbereich meiner Entwicklungstools gehe , klicke auf die Webkomponente. Lassen Sie uns das alles klären. Klicken Sie jetzt auf dieses Element und löschen Sie es aus unserem DOM. Wenn ich zur Konsolenregisterkarte gehe, können Sie sehen, dass der getrennte Callback erneut ausgeführt wurde. Das ist im Grunde verbundener Callback und ein getrennter Callback. Es wird einfach ausgeführt, wenn das Element an das DOM angehängt ist und wenn das Element vom DOM getrennt ist. Wir werden sehen, wie wir den verbundenen Callback in einem Beispiel verwenden müssen , sobald wir später in dieser Klasse in der Praxis zu Webkomponenten gelangen , aber vorerst, bis Sie ein Problem haben, bei dem Sie müssen den verbundenen Callback verwenden, Sie können wahrscheinlich nur den Konstruktor für alle Ihre Initialisierungen und alles verwenden , was Sie ausführen möchten , wenn diese Webkomponente erstellt wird. Sobald Sie jedoch Probleme beim Ausführen von Code in Ihrem Konstruktor haben , müssen Sie sich die verbundene Callback-Funktion ansehen . Das sind Lebenszyklusmethoden. in dieser Spezifikation für benutzerdefinierte Elemente möchte ich in dieser Spezifikation für benutzerdefinierte Elemente über benutzerdefinierte Ereignisse sprechen. Was ich tun werde, ist etwas von diesem Code zu löschen. Ich werde dieses Set Timeout loswerden . Ich werde meine Webkomponente hier immer noch in dieser Konstante behalten . Schlag „Sparen“ drüber, geh hier rüber. Was ich tun werde, ist diesen HTML hier zu aktualisieren. Ich muss es zweimal machen weil wir das auch hier haben. Ich erstelle einfach einen Button. In diesem Button setze ich nur spezielle Ereignis des Inhalts Trigger ein. Ich kopiere den Code hier rüber. Wenn sich das Attribut ändert , geschieht dies beim ersten Mal, wenn das Attribut ohnehin gesetzt wird. Wenn wir dies nicht tun, wenn ich das nicht lasse und die Seite ausführe, sehen Sie, dass die Schaltfläche ohnehin nicht angezeigt wird, da sich die Attributänderung ändert, Callback ausgeführt wird, sobald er dieses Attribut erkennt. Dies ist nicht der sauberste Code, aber wir werden hier kopieren und einfügen. Wenn ich mir jetzt meine Komponente hier ansehe und auf diesen Button klicke, werden wir es in Kürze dazu bringen, etwas zu tun. Lassen Sie uns diese Konsolenprotokolle loswerden. Wir brauchen sie nicht mehr. Wir können diesen verbundenen Rückruf dort behalten. Ich werde diese Kommentare hier loswerden, die ich im entsprechenden Zweig des GitHub hinterlasse , damit du später darauf verweisen kannst. Ich werde diese Kommentare vorerst einfach los. Dann werde ich unser eigenes individuelles Event erstellen. Ich erstelle eine Methode, die auf unserem EventListener ausgeführt wird, also lösen Sie auf unserem EventListener ausgeführt wird, ein spezielles Ereignis aus. Um ein eigenes individuelles Ereignis zu erstellen , können wir einfach ein neues Ereignis zuweisen. Im Parameter hier können wir das Ereignis anrufen, wo immer wir wollen. Ich nenne es einfach Special. Jetzt, dieses neue Ereignis , wird dieses besondere Ereignis in dieser speziellen Ereigniskonstante gespeichert . Wenn diese Methode ausgeführt wird, können wir Ereignis durch Ausführen eines dispatch-Ereignisses auslösen. Dann läuft hier drin ein besonderes Event. Was wir dann hier oben tun werden, geht zu unserem verbundenen Callback und fügt auf der Schaltfläche einen Ereignis-Listener hinzu, um dieses spezielle Ereignis auszuführen. Ich werde die Schaltfläche in dieser Webkomponente finden, die wir über diesen Abfrageselektor tun können. Fügen Sie EventListener hinzu und suchen Sie nach dem Klickereignis. Dann können wir dieses Trigger-Spezialereignis ausführen. Dann werden wir dies binden und uns erlauben , dies als Webkomponente zu referenzieren. Wenn die Bind-Methode Sie ein wenig verwirrt , machen Sie sich keine Sorgen. Es hat mich auch eine Weile verwirrt. Alles, was es tut, ist sicherzustellen, dass dieses Schlüsselwort innerhalb der Funktion mit dieser Webkomponente zusammenhängt , nicht mit der Funktion oder irgendetwas anderem. Es ist nur ein zusätzlicher Schritt. Wenn wir es nicht benutzen, werden wir damit enden dass dies nicht das ist, was wir beabsichtigt haben. Was nun passieren wird, ist, wenn wir auf den Button klicken, werden wir dieses spezielle Ereignis auslösen das unser eigenes benutzerdefiniertes Ereignis auslöst, das als Sonderereignis bezeichnet wird. Aber wenn ich auf den Button klicke, passiert wirklich nichts. Technisch gesehen wird dieses besondere Ereignis ausgelöst, aber wir hören nicht wirklich auf dieses besondere Ereignis. Nichts wird wirklich auf der Seite aktualisiert. Lasst uns das ändern. Gehen wir hier in unsere HTML-Datei ein. Darunter hier in unserem Script-Tag füge ich diesen EventListener zu unserer Webkomponente hinzu. Wir haben unsere Webkomponente hier bereits in dieser Konstante gespeichert , also kann ich eine Webkomponente erstellen, EventListener hinzufügen. Wir können buchstäblich auf das besondere Ereignis hören , das wir geschaffen haben, damit wir etwas Besonderes machen können. Dann setzen wir einfach diese anonyme Funktion ein, die einfach das Konsolenprotokoll einführt. Das Sonderereignis wurde ausgelöst. Wir haben hier drei Schritte. Wir haben eine spezielle Ereignismethode erstellt , die ein benutzerdefiniertes Ereignis auslöst, das wir als special bezeichnet haben. Wir haben das an den Klick EventListener auf der Schaltfläche angehängt. Dann werden wir auf dieses spezielle Ereignis in der Webkomponente selbst und im Konsolenprotokoll warten, das spezielle Ereignis wurde ausgelöst , wenn dieses Ereignis ausgelöst wurde. Wenn wir hier zu unserem Dokument zurückkehren und ich auf „Sonderereignis auslösen“ klicke , können Sie sehen, dass es ausgeführt wird, das spezielle Ereignis wurde ausgelöst. Wenn ich darauf klicke, siehst du die Nummer hier hoch. Offensichtlich kommuniziert dieses einfache Beispiel nicht die Notwendigkeit eines benutzerdefinierten Ereignisses. Wenn Sie jedoch komplexere Elemente haben möchten Sie möglicherweise eine Schaltfläche haben, die das spezielle Ereignis auslöst. Sie möchten etwas anderes haben , das das besondere Ereignis auslöst. Es ist einfach semantisch sinnvoll, ein besonderes Ereignis auf Ihrer Webkomponente zu haben , dann ist dies praktisch. Ein Beispiel, das Sie in der realen Welt finden könnten , ist Modals. Möglicherweise haben Sie ein geschlossenes Ereignis für eine modale Webkomponente. Dieses geschlossene Ereignis wird möglicherweise durch einen Klick auf die Schaltfläche oder durch Klicken außerhalb des Modals oder durch Klicken auf Abbrechen ausgelöst einen Klick auf die Schaltfläche oder durch Klicken . Sie haben drei verschiedene separate Ereignisse, die dasselbe Ereignis in der Webkomponente selbst auslösen möchten . Anschließend können Sie außerhalb Ihrer Webkomponente prüfen, ob das geschlossene Ereignis dieser modalen Webkomponente ausgeführt wurde. Das ist ein Beispiel, das ich in der realen Welt für die Verwendung benutzerdefinierter Elemente gesehen habe . Aber wieder habe ich es in diesem Video sehr einfach gemacht, so einfach wie möglich für euch, es in Aktion zu sehen. Wenn Sie diese Funktion nicht verwenden müssen, müssen Sie sie nicht verwenden. Aber wenn Sie es in der realen Welt sehen und versuchen zu verstehen, was vor sich geht, wenn Sie so etwas sehen, ist dies die Erklärung. Wir können benutzerdefinierte Ereignisse erstellen, die wir in unserer Webkomponente versenden können . Dies ermöglicht es uns, nach Ereignissen zu suchen , die in der Webkomponente selbst stattfinden. Es ist Teil dieser ganzen Denkweise, Funktionen und Ereignisse innerhalb einer Komponente zu kapseln . Das ist alles, worüber ich zum Thema der Spezifikation für benutzerdefinierte Elemente sprechen wollte . Im nächsten Video werden wir über das Shadow DOM sprechen. 6. Der Shadow: Willkommen zurück, Leute. In diesem Video werden wir mit dem letzten Video in Bezug auf unser kleines Projekt hier weitermachen, wo wir aufgehört haben. Aber wir werden zu etwas namens Shadow DOM-Spezifikation übergehen , was, wie wir im Theorieabschnitt erfahren haben, eine Möglichkeit ist, einen DOM-Teilbaum an eine separate Webkomponente anzuhängen aus dem Haupt-DOM. Wir haben also unser Haupt-DOM hier, wie es durch unser HTML dargestellt wird. Wir können ein sogenanntes Shadow-DOM unserer Webkomponente oder für jedes Element erstellen. Und dieses DOM ist getrennt dem, was manchmal als Licht-Dom bezeichnet wird, der Schatten und Licht sind Gegensätze. Das Regular DOM den Light Dom zu nennen, ist also eine Möglichkeit, es vom Schattendom zu unterscheiden. Vielleicht hörst du, dass ich in diesem Video das normale DOM als den Light Dom bezeichne . Also nur eine Notiz da. Was ich also tun werde, ist, einen Teil dieses Codes für die benutzerdefinierten Ereignisse zu entfernen . Es ist sowieso ein bisschen alberner Code , der nur einen Punkt demonstrieren sollte. Also werde ich diesen verbundenen Callback und dieses besondere Ereignis loswerden . Wir brauchen es nicht wirklich, ich lasse den getrennten Callback da drin. Und ich gehe hier rüber und entferne einfach all dieses zusätzliche JavaScript aus dem HTML-Dokument. Lasst uns also direkt hineinspringen und einen Shadow Dom an unsere benutzerdefinierte Webkomponente anhängen . Wie wir das machen, ist sehr einfach. Was wir tun, ist die Methode auszuführen, Schatten anzuhängen. Und das tun wir dem Schlüsselwort, das sich auf die Webkomponente bezieht natürlich mit dem Schlüsselwort, das sich auf die Webkomponente bezieht. Und alles, was wir tun müssen, ist ein JavaScript-Objekt zu übergeben. Und wir werden im Modus „öffnen“ passieren. Wir können auch im Modus „geschlossen“ passieren, aber es ist ziemlich irrelevant. Sie können nachschlagen, warum wir offen oder geschlossen vorbeigehen würden , indem Sie etwas recherchieren, aber das ist momentan nicht besonders wichtig. Was ich also tun werde, ist, anstatt unseren HTML-Code direkt in das Element eingefügt zu haben, was ich tun werde, ist hier Shadow Root. Dies ist ein spezielles Schlüsselwort, das es uns ermöglicht, diesen inneren HTML an den Shadow Root anzuhängen , der der Anfang des DOM-Teilbaums innerhalb unseres im Grunde Shadow-DOM ist . Lassen Sie mich das speichern , was schon ist. Wechseln Sie zu unserem HTML. Ich habe auch hier ein Diagramm. Übrigens öffneten sie sich zwischen den Unterrichtsstunden. Das zeig ich dir in nur einer Sekunde. Und dann lasst uns hier drüben auffrischen. Dann gehen wir auf Elemente ein und klicken wir in dieses Element. Jetzt können Sie sehen, dass wir das Gleiche haben wie zuvor, aber wir haben auch eine Schattenwurzel. Dann können wir hier hineinklicken und einen Blick darauf werfen, und Sie können sehen, dass wir diesen inneren HTML-Code haben. Der Grund, warum wir dieses andere Div auch dort haben , glaube ich, ist, dass wir das nicht in Shadow Root geändert haben. Also werde ich das ändern, hier aktualisieren. Und jetzt können Sie sehen, ob wir in unsere Webkomponente gehen, wir haben dieses div nicht und spanne nicht, aber was wir haben, ist ein Shadow Dom. Und in diesem Shadow Dom haben wir ein div und die Spanne und natürlich den Button , der in diesem Shadow Dom nichts mehr tut . Vielleicht denken Sie darüber nach, was ist der Unterschied zwischen dem Anhängen an den Shadow Dom und dem Anhängen dieses HTML-Codes direkt an die Webkomponente. Und ich bin froh, dass Sie sich das fragen , denn genau darüber werde ich jetzt in dieser folgenden Tabelle sprechen. Im Grunde genommen ist die Hauptsache bei Shadow Dom CSS. Angesichts der Tatsache, dass der Shadow Dom vom Haupt-DOM getrennt ist, erbt es nicht das CSS des Light Dom, wie wir hier in dieser Tabelle sehen können. Wenn ich zum Shadow Dom Inhalt gehe, gilt das Light Dom CSS nicht. Auf der anderen Seite gilt jedes CSS innerhalb des Shadow Dom nicht für die Webkomponente selbst oder Inhalte außerhalb. Wir können dies jedoch überwinden, indem den Pseudoselektor des Doppelpunkts verwenden , über den wir in nur einer Sekunde sprechen werden. Im Grunde fasst diese Tabelle also die Beziehung zwischen Light DOM CSS und Shadow DOM CSS in Bezug auf die Webkomponente selbst zusammen, den Inhalt innerhalb dieser Webkomponente und die Shadow DOM-Inhalt. Ich werde jedes dieser Beispiele in Kürze durchgehen , aber fangen wir einfach mit einem grundlegenden Beispiel an, um uns hier zu starten. Das geht irgendwie in das nächste Video weiter, aber ich werde einen Slot erstellen. Lassen Sie mich hier also einfach in die Komponente gehen. Und anstelle von Button werde ich einen Slot erstellen. Ich kopiere es auch hier unten. Natürlich werden wir alle Inhalte, die ich hier einlege, dorthin gehen, wo unser Slot-Tag eingestellt wurde. Was ich also tun werde, ist eine Spanne zu erstellen und zu sagen, dass dies ein eingesetztes Element ist. Und dann werde ich anfangen , etwas CSS in unserem Light Dom zu schreiben. Also gehe ich auf die Spanne ab und gebe ihr eine rote Farbe. Klicken Sie hier bei dieser Aktualisierung auf „Speichern“. Und Sie können sehen, dass dies ein eingeschlitztes Element ist und die Farbe tatsächlich rot ist. Aber was Sie vielleicht auch bemerkt haben, ist, dass sich innerhalb dieses Divs eine weitere Spanne befindet. Und diese Spanne nahm das CSS in unserem Light Dom nicht an und das liegt daran, dass es Teil der Schattenwurzel ist. Wenn wir also dieses spezielle Tag stylen wollten, würden wir hier in die Komponente gehen und überall dort, wo wir unseren HTML-Code erstellen, erstellen wir ein separates Style-Tag. Und dann können wir unsere Spanne so einfärben. Lass es uns grün machen. Und wieder, nicht der sauberste Code, aber wir müssen ihn auch hier kopieren . Ich klicke auf „Speichern“ und aktualisiere dann hier drüben. Sie können sehen, dass die Schatten-Dom-Spanne grün und die eingezogene Spannweite rot ist. Dies ist also die Grundlagen zum Styling des Shadow Dom. Wenn Sie ein Element im Shadow Dom haben, muss das Styling normalerweise auch innerhalb des Shadow Dom erfolgen. Und das wirkt sich nicht auf eine Spannweite aus, die eingeschlitzt ist. Umgekehrt erben alle Elemente im Shadow Dom nicht die Stile des Light Dom. Wie Sie hier gesehen haben, traf innerhalb des Light Dom setzte auf die Spanne innerhalb des Light Doms zu, als ich eine Stilregel für Farbe Rot auf Spannweiten nicht auf die Spanne innerhalb des Light Doms zu, als ich eine Stilregel für Farbe Rot auf Spannweiten innerhalb des Light Dom setzte. Das ist also das grundlegende Beispiel für das Styling des Shadow Dom. Aber lasst uns tatsächlich zu unserem Diagramm zurückkehren und lasst uns die verschiedenen Szenarien durchgehen. Also das erste Szenario, das das Light Dom CSS verwendet , um die Webkomponente selbst zu stylen. Was ich damit meine, ist genau so, als würden wir den Elementnamen verwenden, um diese Spanne anzusprechen. Das können wir auch mit einer Webkomponente tun. Es funktioniert also wie jedes andere HTML-Element. Wir können einfach Web Component schreiben und sagen wir einfach Textdekoration, unterstreichen, speichern und aktualisieren, und Sie können sehen, dass die gesamte Webkomponente jetzt eine Unterstreichung hat. hier zurück zum Shadow Dom CSS gehen, können wir die Webkomponente selbst aus dem Shadow Dom heraus stylen die Webkomponente selbst aus dem Shadow Dom heraus , indem wir einen speziellen Pseudo-Selektor-Doppelpunkt-Host verwenden. Also lasst uns zurückgehen und das jetzt machen. Wenn ich also hier in unsere Komponente gehe und bevor wir diese Grünspanne machen, lass uns hosten. Vielleicht lassen Sie uns einfach das Schriftgewicht von allem in der Webkomponente fett machen . Ich klicke auf „Speichern“ und aktualisiere hier drüben. Das funktioniert aufgrund dieses Rückrufs zur Attributänderung nicht. Lassen Sie uns das jetzt aufräumen und diesen sauberen Code erstellen. Anstatt genau denselben Code zweimal einzustellen, werde ich die spezifische Spanne hier anvisieren und diesen Wert auf den neuen Wert aktualisieren. Anstatt das innere HTML explizit auf den Schattenstamm zu setzen , gehe ich hierher zurück, finde diese bestimmte Spanne auf der Schattenwurzel, ziele dann auf den inneren HTML dieser Spanne und setze ihn dann auf der neue Wert. Das ist viel sauberer. Auf diese Weise behalten wir die innere HTML-Struktur unserer Schattenwurzel bei, ohne das Ganze jedes Mal aktualisieren zu müssen. Das sollte dies jetzt funktionieren lassen, was es tut, wir haben jetzt die gesamte Webkomponente fett, und wir konnten dies innerhalb des Schatten-Roots mithilfe dieses Host-Pseudo-Selektors tun . Gehen wir hier zurück an den Tisch. Schauen wir uns den geschlitzten Inhalt an. Der geschlitzte Inhalt im Kontext des Light DOM wird nicht als Teil des Shadow-DOM angesehen, daher gelten hier Light DOM-Stile. Das haben wir schon gesehen. Wir haben es im Falle dieser Spanne hier gesehen , die eingeschlitzt wurde. Die Farbe dieser Spannweite ist rot. Da es nicht als Teil des Shadow-DOM angesehen wird, gelten hier die Light-DOM-Stile. Aber wie wir zuvor mit dem Host-Selektor gesehen haben, gibt es eine Möglichkeit, diesen Sloting-Inhalt auch innerhalb des Shadow DOM CSS zu stylen . Wir müssen nur die Schlitz-Pseudoklasse mit Doppelpunkt verwenden und wir müssen einen Parameter übergeben . Lass uns das jetzt machen. Gehen wir in unsere Datei component.js. Lassen Sie uns diese geschlitzte Pseudoklasse und den Parameter eingeben. Wir werden die Spanne einsetzen, damit wir die geschlitzte Spanne stylen . Lassen Sie mich die Farbe ändern, sagen wir mal, grau. Wenn wir dann rübergehen und uns auffrischen, was wird Ihrer Meinung nach passieren? Lasst es uns herausfinden. Wie Sie sehen können, ändern sich diese Farben nicht. Warum ist das so? Wenn wir uns dieses zweite Element hier ansehen, welches das einschlitzte Element ist, und wir uns die angewendeten Stile ansehen , können Sie sehen, dass wir hier unsere Farbe Rot haben, und dann haben wir unsere Farbe Grau für die Spanne, aber die Farbe Rot überschreibt. Dies stimmt mit dem überein, was ich hier in der Tabelle geschrieben habe , was ich hier in der Tabelle geschrieben Im Falle von Konflikten die Stile aus dem Light DOM Vorrang. Man könnte denken, ich habe das zuletzt gesetzt , damit das Grau die Kontrolle übernehmen würde, aber den Fall, dass es einen Stil für diesen bestimmten Inhalt im Light DOM gibt, kommt der Stil im Light DOM zu kontrolliere die Farbe. Wenn wir diese Zeitspanne innerhalb unseres Shadow-DOM stylen wollten , müssen wir sicherstellen , dass dies nicht da ist. Wenn ich das kommentiere und dann hier aktualisiere, kannst du sehen, dass wir das in Grau stylen können, wenn es nicht von einem Stil überschrieben wird, der sich auf dasselbe Element in unserem Light DOM bezieht . Erfrischen Sie uns hier drüben, lassen Sie es uns auf rot halten und gehen wir zurück zu unserer letzten Zeile, abgesehen von der Ausnahme hier für Shadow DOM-Inhalte in unserer Tabelle. Jedes Light DOM CSS hat keine Auswirkungen auf unser Shadow-DOM. Ich denke, wir können bereits einige Beispiele dafür sehen. Wir können sehen, dass es allen Spannelementen eine Farbregel für Rot gibt. Aber wenn wir hier reingehen, haben wir eine Spanne in unserem Shadow DOM und natürlich ist es immer noch grün. Wir haben gesehen, dass bereits und dann mit dem Shadow DOM CSS offensichtlich jedes CSS, das wir im Shadow DOM erstellen, einen direkten Einfluss auf das Shadow DOM haben wird . Auch hier haben wir gesehen, dass Sie beim Styling unseres Span-Elements innerhalb des Shadow-DOM sehen können, dass es grün ist. Das ist im Grunde der ganze Tisch. Die einzige Ausnahme ist, dass Light DOM CSS-Variablen innerhalb des Shadow DOM CSS zugänglich sind . Wenn Sie zuvor CSS-Variablen verwendet haben, wie dies funktioniert, können wir in unserem Light-DOM einige CSS-Variablen erstellen. Was ich tun werde, ist, im Root eine CSS-Variable namens BG-Farbe zu erstellen , und wir setzen diese auf Schwarz. Was ich dann mache, ist, dass ich hier reingehe und lass uns die Hintergrundfarbe auf die Variable der BG-Farbe setzen , auf „Speichern“ klicken und hier aktualisieren. Sie können sehen, dass wir, obwohl die CSS-Variable im Light DOM definiert wurde, die CSS-Variable im Light DOM definiert wurde, sie immer noch in das Schatten-DOM bringen können. Es ist nur so, dass die CSS-Regel im Shadow DOM CSS enthalten sein muss . Dies gibt uns eine gewisse Kontrolle über den Shadow-DOM-Inhalt in Bezug auf Verwendung von Variablen in unserem Light DOM. Wenn wir ein Farbschema hatten, kann ich das ändern, lasst uns das gelb machen und auf „Speichern“ klicken. Jetzt können Sie sehen, dass wir Werte innerhalb des Light DOM aktualisieren können , was sich auf das Shadow-DOM auswirkt , wenn Sie Variablen verwenden. Aber abgesehen davon, wenn wir hier reingehen und Spanne, Hintergrund, Farbe sagen würden, was sollen wir tun? Lass uns blau werden. Wir haben diese Span-Regel zweimal, also werde ich diese einfach auskommentieren. Ich klicke auf „Speichern“, aktualisiere hier drüben. Sie können sehen, dass der blaue Hintergrund nur für den geschlitzten Inhalt gilt. Es gilt nicht für die Spanne innerhalb des Shadow-DOM. Wir können diese Farbe nicht über das Licht-DOM ändern , es sei denn , wir verweisen natürlich auf diese Variablen. Wenn du jemals verloren bist, verbinde ich euch diesem Tisch gleich hier. Ich lege jetzt einen Link auf deinen Bildschirm, damit du ihn dir ansehen kannst , wenn ich diesen Kurs veröffentliche. Aber im Wesentlichen geht es im Shadow DOM hauptsächlich um CSS. Es ist eine Möglichkeit für uns, das CSS eines Elements zu reparieren, vielleicht wenn wir Elemente über verschiedene Projekte hinweg teilen und wir wollten, dass das Element genau gleich aussieht, egal in welchem Projekt es sich befand, das Shadow DOM würde sich als nützlich erweisen. Aber innerhalb Ihrer eigenen privaten Anwendungen und Webseiten bin ich mir nicht sicher, ob das Shadow-DOM zu benötigt wird, weshalb wir es am Ende dieser Klasse nicht im praktischen Beispiel verwenden werden. Es ist jedoch in Webkomponenten beliebt daher war es wichtig, diese Lektion im Shadow DOM zu lernen . Wie immer wird dies alles für GitHub gebunden sein, sodass Sie diesen Code später erwarten können. Ich werde diese Tabelle natürlich mit dir teilen, aber das fasst das Shadow-DOM ziemlich zusammen. wir im nächsten Video über Slots und Vorlagen. 7. Slots und Vorlagen: Willkommen zurück Leute. In diesem Video werden wir über Slots und Vorlagen sprechen , die ziemlich einfach sind. Wir haben bereits einen Slot im vorherigen Video verwendet. Wir haben es hier in etwas Inhalt eingefügt. Grundsätzlich haben wir eine Spanne innerhalb dieser Webkomponente verschachtelt und konnten dann wählen, wo sie in diese spezielle HTML-Struktur innerhalb unseres Schatten-DOM gleiten soll . Wenn Sie sich das im eigentlichen Browser ansehen, können Sie sehen, dass wir unsere Schattenwurzel hier haben. Wenn ich in das Div gehe und hier in diesen geschlitzten Inhalt gehe, kannst du sehen, dass es einen Link zu dem eingelegten Inhalt gibt , der genau hier ist. Es ist eine seltsame Sache, bei der es technisch gesehen nicht Teil des Schatten-DOM ist, aber es wird hier über dieses Slot-Tag in das Schatten-DOM eingefügt. Jetzt haben wir bereits gesehen, dass in der Praxis als Nächstes die Slots zu nennen ist, wenn wir also mehrere Slots innerhalb einer bestimmten Webkomponente verwenden möchten . Um dies zu demonstrieren, entferne ich den gesamten Code, den wir für diese Demonstration nicht wirklich benötigen. Auch hier können wir den getrennten Callback verlassen, aber ich werde dieses Attribut hier loswerden . Werde das los. Dann werde ich das Attribut los, wie es hier im HTML existiert. Ich schaffe hier eine weitere Spanne. Dann schreibe ich, dass diese Spanne auch eingeschlitzt wurde. Wenn ich auf „Speichern“ klicke, lass uns sehen, was jetzt passiert. Wenn ich die Seite aktualisiere, siehst du dass sich zwei Spannweiten in diesem einen Slot befinden. Was wir jedoch über Namensschlitze tun können, ist, diese beiden Spannweiten in verschiedene Teile derselben HTML-Struktur zu integrieren diese beiden Spannweiten in verschiedene Teile . Was meine ich damit? Nun, gehen wir hier zu unserer Datei component.js und lassen Sie uns das ändern. Sagen wir einfach, wir haben zwei Divs. Das erste div wird ein **** für die erste Spanne haben und lassen Sie uns ein anderes Div erstellen, das von diesem div getrennt ist und innen die zweite Spanne sein wird, die ich in meine Webkomponente einlege anderes Div erstellen, das von diesem div getrennt ist und innen die zweite Spanne sein wird . Sobald wir diese Slots benennen, wird diese Spanne in den ersten Slot gehen und diese Spanne wird in den zweiten Slot gehen. Wir können entweder im HTML-Dokument oder im JavaScript-Dokument beginnen . Ich fange hier im JavaScript an, alles was ich tun muss, ist den Slot zu benennen, indem ich den Namensparameter hier hinzufüge den Namensparameter hier und dann werde ich es einfach Slot 1 nennen. Dann gehe ich zum zweiten Slot und nenne ihn Slot 2. Dann in unserer index.html, um diese zu verknüpfen werde ich den Slot-Parameter verwenden, und ich werde diesen Namen wieder verwenden, also Slot 1 und dann ist und ich werde diesen Namen wieder verwenden, also Slot 1 Slot gleich Slot 2. Wenn ich jetzt auf „Speichern“ klicke und hier aktualisiere, was denkst du, dass es passieren wird? Lasst uns auffrischen und schauen wir uns mal hinein. Wie Sie sehen können, haben wir unsere beiden geschlitzten Elemente hier drüben, aber in Bezug darauf, wo sie in unsere Schattenwurzelstruktur passen , öffnen wir diesen Bad Boy und wir können sehen, dass wir zwei Divs haben. Im ersten Div haben wir den ersten Sloting-Inhalt, und im zweiten div haben wir den zweiten Sloting-Inhalt. Jetzt sind sie in separaten Divs und wir brauchen das vielleicht für alles, was wir mit unserer HTML-Struktur tun müssen, also Styling und was nicht. diese Weise können wir mehrere Dinge in verschiedene Teile unserer Schatten-DOM-Struktur einfügen. Daran folgt das nächste, was ich Ihnen zeigen möchte , sind Vorlagen. Ich werde diesen Code genau hier entfernen [NOISE], dann füge ich einen HTML-Code ein, die Stilregeln und ich gehe hier zurück zu index.html. Ich gehe hier rein und entferne diesen Inhalt, denn wir werden Inhalte in eine Vorlage einfügen und diesen Inhalt dann in die Webkomponente bringen. Wir können das auf zwei Arten machen. Ich bin sicher, dass wir es auf verschiedene Arten machen können, aber es gibt zwei Möglichkeiten, wie ich es dir in diesem Video zeige. Wir könnten das Template-Tag außerhalb der Webkomponente platzieren. In diesem Fall geben wir ihm einen Ausweis. Ich nenne es einfach Vorlage der Einfachheit halber. Dann erstellen wir hier unsere Vorlage. Ich mache einfach ein h1 und sage, dass dieser Vorlagencode die Webkomponente ausmacht. Dann erstelle ich ein Absatz-Tag und verwende Emmet in Visual Studio Code, ich kann Lorem hit „Tab“ eingeben und es wird Lorem Ipsum automatisch generieren. Ich repariere nur den Abstand hier, damit ihr den gesamten Absatz sehen könnt. Hit „Speichern“ drauf. Da es sich um ein Vorlagen-Tag handelt, wird es zur Laufzeit nicht gerendert. Wenn ich wieder hierher gehe, führe den Code aus, du wirst sehen, dass wir unseren Vorlagencode hier haben. Wir haben dieses Dokumentfragment hier, also haben wir den Code in unserem HTML, aber nichts wird gerendert und das liegt daran, dass es sich in einem Template-Tag befindet, was bedeutet, dass es nicht gerendert wird , wenn wir nicht nehmen diese Vorlage codieren und rendern Sie es mit JavaScript. Genau das mache ich gleich. Ich gehe hier zurück zu unserem Code-Editor und gehe zu component.js. Was ich tun werde, ist, nachdem wir unseren inneren HTML hier festgelegt haben, das nur das Style-Tag ist, was ich tun werde, ist, diesen Vorlagencode zu finden. Wie ich das machen kann, ist der Dokumentabfrage-Selektor. Im Grunde möchte ich dieses Element nur finden. Es war eine Vorlage mit der ID der Vorlage. Deshalb habe ich Hash davor gelegt. Dann finde ich den Inhalt davon und führe dann Clone Node mit dem Parameter true aus. Mit dem Parameter „true“ , der einen tiefen Klon darstellt, alle Unterelemente innerhalb werden auch alle Unterelemente innerhalb der Vorlage gerendert. Ich kann mir nicht wirklich eine Situation vorstellen, in der Sie hier falsch laufen möchten. Lassen Sie es uns einfach wahr halten. Natürlich müssen wir das etwas benutzen. Ich werde es in einer Variablen speichern, eine Konstante zuerst. Jetzt haben wir unsere const-Vorlage. Es sieht so aus, als hätte ich das versehentlich außerhalb der Konstruktorfunktion platziert , also werde ich das wieder dort hineinlegen. Tut mir Leid. Mit dieser Vorlage kann ich geklonten Knoten an den Shadow-Root anhängen. Ich werde hier die Schattenwurzel greifen und führe ein Kind anhängen aus, indem ich diesen Vorlagencode als Argument darin platziere. Aktualisieren wir die Seite hier drüben und sehen, was passiert. Sie können sehen, dass der Vorlagencode jetzt in unserer Webkomponente ausgeführt wird. Wenn ich hier in den Code der Webkomponente gehe, kannst du sehen, dass wir unseren Schattenstamm haben und innerhalb der Schattenwurzel haben wir das Style-Tag, das wir festlegen, indem den inneren HTML explizit festlegen. Dann haben wir das h1- und p-Tag, das wir in der Vorlage festgelegt haben. Was wir auch tun können, um dies ein bisschen einfacher und eingekapselter zu gestalten ein bisschen einfacher und eingekapselter , ist das Template-Tag in die Webkomponente selbst zu legen . Ich kopiere das einfach und kommentiere es dann aus. Gehen wir in die Webkomponente. Da wir uns jetzt in der Webkomponente befinden, können wir einfach auf das Vorlagenelement verweisen , anstatt eine ID zu haben. Ich werde „Speichern“ drücken und dann zu unserem Code gehen, dann zu unserem Code gehen und was wir stattdessen tun können, ist diesen Hash wegzunehmen. Anstelle von Dokumenten können wir das sagen. Dies wird jede Vorlage in unserer Webkomponente nachschlagen. Ich werde auf „Speichern“ klicken, hier aktualisieren, und du siehst, dass wir genau das gleiche Ergebnis erhalten. Sie können sehen, dass sich die Vorlage in der Webkomponente befindet und dann der Code, den wir in dieser Vorlage hatten innerhalb des Schatten-DOM geklont wurde. Dies funktioniert genauso, als würden wir das Schatten-DOM überhaupt nicht verwenden. Entfernen wir einfach das Schatten-DOM vollständig. Eigentlich werde ich es einfach kommentieren weil ich denke, dass wir es im nächsten Video verwenden könnten. Hängen wir es einfach an das eigentliche innere HTML an. Aktualisieren Sie hier drüben und Sie werden sehen, dass es nicht angehängt wird, und das liegt daran, dass wir hier immer noch Schattenwurzel haben. Diese Append-Kind-Aktualisierung hier drüben. Wieder funktioniert nicht. Was haben wir gemacht? Eigenschaften von null können nicht gelesen werden. Ich glaube, das Problem hier ist, dass wir in unserem HTML explizit festgelegt haben , was den HTML-Inhalt innerhalb der Webkomponente, die wir hier platziert haben, auslöscht den HTML-Inhalt innerhalb der , nämlich nur dieses Template-Tag. In diesem Fall würde ich hier rübergehen und das einfach loswerden und das einfach loswerden stattdessen direkt in die Vorlage legen, was ohnehin etwas sauberer ist. Lassen Sie uns darauf „speichern“ und dann neben der Vorlage füge ich das Style-Tag direkt in unseren HTML-Code ein. Ich habe bei dieser Aktualisierung hier auf „Speichern“ geklickt und das Problem ist jetzt verschwunden. Je nachdem, wie Sie es machen möchten, sieht das tatsächlich ziemlich sauber aus, da wir überhaupt keinen HTML-Code in das JavaScript einfügen. Wir fügen den gesamten HTML-Code und die Stile, die enthalten sind, in unsere Webkomponente ein. Da wir jedoch kein Schatten-DOM mehr verwenden, gelten diese Stile theoretisch für alles. Wenn wir hier reingehen und eine Spanne setzen, sagen Sie, dass dies eine Spanne ist. Aktualisieren Sie hier drüben. Die Stile aus unserem leichten DOM, die wir hier oben haben , und unsere Stile hier in der Webkomponente gelten beide. Wenn ich mir das ansehe, schauen wir uns diese besondere Spanne hier an. Sie können sehen, dass die blaue Hintergrundfarbe und die gelbe Hintergrundfarbe beide zutreffen. Aber da dies später im Dokument geschieht, überschreibt es dieses hier. Im Wesentlichen ist es für uns keinen Sinn, hier ein Style-Tag zu haben , wenn wir beabsichtigen, dass dies nur für die Webkomponente gilt . In diesem Fall möchten wir beim Schatten-DOM bleiben. Ich gehe einfach hier und zurück hier drüben. Lasst uns das Schatten-DOM behalten und hier aktualisieren. Wenn ich unserer Vorlage hier eine Spanne hinzufügen würde, aktualisieren Sie es. Untersuchen Sie dieses Element. Sie können sehen, dass keiner der Stile aus dem hellen DOM hier angewendet wird, da dieser Vorlagencode in ein Schatten-DOM gelegt wird und daher nur die Stile, die wir in unserer Schattenwurzel haben wird sich darauf bewerben. Ziemlich einfache Vorlagen hier, viel Flexibilität darin, aber im Wesentlichen müssen wir nur ein Vorlagen-Tag erstellen, und dann werden wir im Grunde genommen diese Vorlage finden schauen Sie sich seinen Inhalt an und führen Sie Clone Node aus, um einen DOM-Knoten oder DOM-Subtree basierend auf dieser Vorlage zu erstellen einen DOM-Knoten oder DOM-Subtree basierend auf , und dann können wir ihn überall in unserer Webkomponente anhängen , entweder an den Schattenstamm oder an das innere HTML direkt. Das umfasst Slots und Vorlagen. Im nächsten Video werden wir kundenspezifische integrierte Elemente behandeln. 8. Benutzerdefinierte integrierte Elemente: Alles klar Leute. In diesem Video werden wir kundenspezifische integrierte Elemente behandeln. Bis zu diesem Zeitpunkt haben wir das Root-HtmlElement erweitert. Aber jetzt werden wir ein bestimmtes HtmlElement erweitern, und dies wird als Erstellen eines benutzerdefinierten integrierten Elements bezeichnet . Was ich also tun werde, ist all diesen Code zu entfernen , weil wir ein ganz neues Element erstellen und weil ich das mache, gehe ich hier in meinen Index und entferne auch diesen ganzen Code. Wir könnten genauso gut alles in unserem Style-Tag entfernen. Wir haben hier eine ziemlich saubere Weste. Um ein benutzerdefiniertes integriertes Element zu demonstrieren, werde ich das HTML-Button-Element erweitern. Was wir also tun werden , ist unseren eigenen benutzerdefinierten Button zu erstellen . Also beginnend auf die gleiche Weise, wie wir es normalerweise tun würden, indem wir die Klasse schreiben, und dann rufe ich mein benutzerdefiniertes Button-Element auf, buchstäblich nur CustomButton. Dann schreibe ich Extends und anstatt HtmlElement zu schreiben, mache ich HtmlButtonElement. Wenn Sie jetzt einen Code-Editor oder eine IDE wie Visual Studio Code verwenden , können Sie sehen, nachdem ich HTML eine ganze Liste all dieser verschiedenen Elemente, die ich verwenden kann. Das Format ist im Grunde HTML, der Name des Elements und dann Element. Also kann ich ein Überschriftenelement erweitern. Ich kann hier ein Bildelement, ein Eingabeelement, eine Beschriftung, einen Link und so viele verschiedene Optionen erweitern ein Eingabeelement, eine Beschriftung, . Wenn Sie also die verschiedenen Optionen durchsuchen müssen, sind Sie sich nicht sicher, wie der Klassenname lautet, dann hilft das wirklich. Aber was ich suche, ist ein HtmlButtonElement, also werde ich das treffen. Dann lasst es uns öffnen, wie wir es beim letzten Mal getan haben. Ich schreibe unsere CustomElements define-Methode, wie wir es zuvor für Standard-Webkomponenten getan haben , und ich mache den Tag Custom-Button. Als zweites Argument werden wir diese Klasse wie immer einbringen, aber hier wird es wieder anders. Wir müssen ein drittes Argument vorbringen. Wir müssen ein JavaScript-Objekt mit einem Schlüssel-Wert-Paar einfügen. Der Schlüssel wird erweitert und der Wert ist das Tag des Elements, das wir erweitern. Für eine HTML-Schaltfläche ist das Tag natürlich eine Schaltfläche. Wenn ich das im HTML schreiben würde, wird es so sein, als würdest du im Grunde das Wort nehmen , das zwischen dem Zeichen weniger als und größer als liegt, und es nach den Ausführungen dem Zeichen weniger als und größer als genau hierher setzen. Wenn dies zum Beispiel ein benutzerdefinierter Link war, lassen Sie mich betrügen, indem ich dort die automatische Vervollständigung verwende. Wenn wir Ihr HTML-Link-Element erweitern würden, würde sich dies in „a“ ändern, da das Anker-Tag so im HTML dargestellt wird. Aber wir machen Button, also gehe ich zu Control Z, bis wir wieder zum Button kommen. So wie wir es zuvor mit Standard-Webkomponenten getan haben , werde ich hier einen Konstruktor erstellen und dann natürlich super laufen , damit wir die Konstruktorfunktion erben können der Klasse, die wir erweitern, die HtmlButtonElement war. Was ich dann mache, ist hier zu unserer index.html zu gehen und etwas HTML zu schreiben. Lassen Sie uns tatsächlich dieses benutzerdefinierte integrierte Element erstellen. Die Art und Weise, wie wir das tun, unterscheidet sich von Standard-Webkomponenten. Wir werden tatsächlich den ursprünglichen Namen des Elements verwenden , das wir anpassen. Es wird Button sein. In diesem Button schreibe ich einfach, drücke mich und dann hier drin, um es in unser benutzerdefiniertes integriertes Element zu machen unser benutzerdefiniertes integriertes Element und nicht nur eine Standardschaltfläche, wir werden das Attribut von is verwenden. Dann hier drin, custom-button, der mit dem übereinstimmt, was wir im ersten Argument unserer definierten Methode hier geschrieben haben . Wenn ich hierher zurückkomme, was ich für dieses Beispiel tun könnte , ist, dass ich einen Link einfüge. Ich füge ein benutzerdefiniertes Linkattribut ein und lass es uns einfach auf google.com gehen. Das wäre also vielleicht wie das Standardverhalten eines Link-Tags. Also würden wir href schreiben, und wenn wir dann auf den Link klicken, würde es zu dieser spezifischen URL gehen. In diesem Fall, wenn ich das gerade mache und hier zu unserem Code zurückkehre und auf „Drücken Sie mich“ klicke, wird nichts passieren, da dies ein benutzerdefiniertes Attribut ist. Es wird nichts tun, es sei denn, wir schreiben hier etwas Code in unsere Komponente, um damit umzugehen. Genau das werde ich als Nächstes tun. Ich werde diesen Wert also greifen.getAttribute. Dann gebe ich den Attributnamen in ihren Link und dann werde ich das natürlich irgendwo aufbewahren. Ich werde es in der Webkomponente selbst speichern, also werde ich sagen, dass dies.link dem Wert von dies.getAttribute Link entspricht . Wenn ich wollte, könnte ich es auch tun, wenn dies ein Attribut hat wie zuvor, aber ich gehe einfach davon aus, dass es das hat, weil ich die Kontrolle habe , diesen Code zu schreiben, und ich werde vergewissern Sie sich, dass es dieses Attribut hat. Was ich dann mache, ist, dass ich einen Event-Listener einrichten werde. Wenn auf dieses Element geklickt wird, klicken Sie also auf „Ereignis“, dann führe ich diesen Code aus. Was ich tun werde, ist, den Fensterspeicherort href auf den Wert von this.link zu ändern . Was wir hier getan haben, ist, dass wir den Wert innerhalb des Link-Attributs genommen , in dieser Variablen gespeichert und dann einen Ereignis-Listener für das Klickereignis auf dieser benutzerdefinierten Schaltfläche erstellt haben einen Ereignis-Listener für . Wenn darauf geklickt wird, wird der Benutzer zu dem umgeleitet , was wir in diesem Link-Attribut gespeichert haben. Also lasst uns testen, ob das funktioniert. Jetzt werde ich hier aktualisieren und klicke auf „Drücken Sie mich“, und wie Sie sehen können, gehen wir zu google.com. Auch hier nicht das praktischste Beispiel, weil wir dafür einfach ein Link-Tag hätten verwenden können. Aber lassen Sie mich dieses Beispiel ein wenig weiter ausdehnen. Da wir hier ein Element haben, das das gesamte ursprüngliche Verhalten eines Button-Elements erbt , müssen wir möglicherweise verhindern, dass es sich wie eine Schaltfläche verhält. Ein Beispiel dafür wäre, wenn es sich in einem Formular befand. Ich werde hier ein Formular haben und setze die Aktion als Beispiel auf Endpunkt. Dies wird das Formular offensichtlich ins Nirgendwo schicken , weil ich eigentlich keinen Endpunkt habe. Das nennt man Endpunkt. Wenn ich dann auf „Speichern“ klicke und hier aktualisiere und auf „Drücken Sie mich“ klicke, werden Sie sehen, dass es das Verhalten einer Schaltfläche in einem Formular erbt , das das Formular absenden soll. Hier können Sie also sehen, dass wir hier zu diesem Endpunkt gehen , der nicht existiert. Das ist natürlich anders als wenn ich ein Link-Tag hätte, weil wir ein Link-Tag haben, Nummer 1, es würde nicht so aussehen, weil es kein Button ist. Nummer 2, ein Link-Tag löst keinen Gipfel eines Formulars aus, wenn es sich innerhalb eines Formulars befindet. Was wir also tun können, ist, dass ich hier zu component.js gehen kann und ich kann event.PreventDefault gehen. Es ist bei dieser Aktualisierung hier gespeichert. Wenn ich darauf klicke, obwohl es sich in einem Formular befindet, wird es dieses obwohl es sich in einem Formular befindet, Standardverhalten verhindern und dann wird es das tun, was wir ihm gesagt haben, nämlich den Benutzer umzuleiten auf welche Adresse im Link-Attribut auch immer die Adresse lautet. Gehe hierher zurück, nur um dieses Haus zu bohren, wenn ich einen Standardknopf einsetzen würde , der nicht eines unserer benutzerdefinierten Einbauelemente war , der nicht eines unserer benutzerdefinierten Einbauelemente und sagen, dass du mich auch drücken kannst und dann aktualisiere ich hier drüben. Wenn ich auf das klicke, kannst du mich auch drücken, wird sich wie eine Standardschaltfläche verhalten und das Formular absenden. Da wir diese andere Schaltfläche jedoch angepasst haben , um den Standardwert zu verhindern und stattdessen den Benutzer auf google.com umzuleiten, wird er sich anders verhalten. Hoffentlich nicht das praktischste Beispiel, aber hoffentlich kommuniziert dies was wir mit Elementen machen können. Wir können einige der Verhaltensweisen und Attribute eines Elements verwenden, das uns gefällt, und wir können sie an unsere Zwecke anpassen. Offensichtlich gibt es hier wahnsinnige Flexibilität. Sie können dies in jede Richtung gehen, die Sie wollen, aber das werden wir nicht besonders im praktischen Bereich dieser Klasse verwenden, nur etwas, das Sie beachten sollten, weil es fällt unter der Web-Komponenten-Spezifikation. Wir können hier bestimmte Elemente erweitern, und dies wird als kundenspezifische integrierte Elemente bezeichnet. Leute, im nächsten Video werden wir also die endgültige Spezifikation abdecken, werden wir also die endgültige Spezifikation abdecken über die wir noch nicht gesprochen haben, nämlich die ES-Modulspezifikation. Wir sehen uns im nächsten Video. 9. ES: Leute, also sprechen wir in diesem abschließenden Video, bevor wir in unser praktisches Klassenprojekt einsteigen, in unser praktisches Klassenprojekt einsteigen, über ES-Module, die die vierte Spezifikation innerhalb der Meta-Spezifikation der Webkomponenten ist . ES-Module sind im Wesentlichen eine Möglichkeit für uns , unser Projekt anders zu strukturieren. Wir können jede unserer Komponenten in eine eigene modulare JavaScript-Datei einfügen und sie dann in eine andere JavaScript-Datei einbringen und diese JavaScript-Datei dann in unser HTML-Dokument bringen. Oder alternativ können wir einfach jede Komponente ohne diese Datei in unser HTML-Dokument einbringen . Aber in den Beispielen, die ich Ihnen zeigen werde, importiere ich alle Komponenten in eine einzige JavaScript-Datei, und dann werden wir diese in unser HTML-Dokument einfügen. Einige Projekte, das wird sehr hilfreich sein, einige Projekte werden überhaupt keinen Sinn ergeben. Wir werden ES-Module in der Praxis verwenden , die nach dieser Lektion kommt. Dies wird etwas sein, das wir sehr bald in Aktion sehen werden , aber lassen Sie uns für diese Lektion ES-Module tatsächlich demonstrieren. Wie gesagt, was ich tun werde , ist, dass ich alle unsere Komponenten importieren werde , Moment gibt es nur eine aber ich werde eine zweite in eine zentrale JavaScript-Datei machen , und ich werde nenne das hier index.js. Was ich jetzt tun werde, um uns zum Einstieg zu bringen, schließen wir das, damit wir das Ganze sehen können, ist, dass ich diese benutzerdefinierte Elemente-Methode hier verschieben und diese in unsere index.js verschieben werde . Damit wir hier Zugang zu dieser Klasse haben, muss ich sie von hier aus exportieren und dann hier importieren . Erstens, weil wir hier nur die eine Klasse haben, werde ich keinen benannten Export machen, einen unbenannten Export durchführen. Ich exportiere einfach Standard und dann den Klassennamen, den ich exportieren möchte. Was das bedeutet, ist, dass es nur diese Klasse exportiert, also kann ich, sobald ich sie hier importiert habe, direkt in unserem Code hier referenzieren. Ich führe die Importanweisung hier aus, wir suchen nach einer benutzerdefinierten Schaltfläche und füge dann nach dem Schlüsselwort von hier nach dem Schlüsselwort von hier den Pfad zur Datei ein. Nun, da ich das getan habe, muss ich den Code hier aktualisieren, also stelle ich anstelle von component.js index.js ein. Wie wir in der Theoriestunde gesehen haben, muss ich das Attribut hier des Typmoduls ändern oder hinzufügen . Darauf klicke ich „Save“. Lasst uns hier drüben auffrischen. Wir sollten sehen, dass wir diese Schaltflächen immer noch haben , aber wenn ich auf das erste klicke, das unser benutzerdefiniertes integriertes Element ist, können Sie sehen, dass wir die gleiche Funktionalität wie eine Standardschaltfläche haben . Beide sind genau gleich. Der Grund liegt genau hier in unserer JavaScript-Konsole. Wir haben hier einen CORS-Richtlinienfehler und der Grund dafür ist wir dies nicht wirklich tun können den HTML-Code aus dem Dateisystem ausführen. Was wir tun müssen, ist einen Server zu betreiben. Das ist im Visual Studio-Code sehr einfach. Hoffentlich ist es auch in Ihrer IDE einfach und einfach genug. Wenn nicht, können Sie immer einfach Visual Studio Code verwenden und ich gehe einfach hier runter und klicke auf Go Live. Jetzt können Sie sehen, dass wir einen Server betreiben. Ich kann das sehen, weil wir hier eine IP-Adresse haben und nicht einen Pfad aus dem Dateisystem. Wenn ich nun die Befehlsoption I drücke, um die Konsole aufzurufen, sehen Sie keine Fehler und wenn ich auf „Drücken Sie mich“ klicke, bringe ich zu Google nicht zu dem Endpunkt , nach dem es hier sucht. Ich schließe das im Dateisystem und wir benutzen einfach dieses. Hier können Sie sehen, dass das alles bereits funktioniert. Wir haben Code aus component.js in index.js importiert und dann haben wir ihn in index.html importiert . Aber das wird nicht wirklich sinnvoll sein, und deshalb haben wir eine andere Komponente erstellt. Ich erstelle hier eine zweite Komponente. Das ist eine schreckliche Benennung, aber ich nenne es einfach Komponente-2. Weißt du was? Lassen Sie uns nur zum Spaß ein weiteres benutzerdefiniertes integriertes Element erstellen. Ich schreibe Klasse und lass uns das Link-Element erweitern , um einen benutzerdefinierten Link zu erstellen. Ich schreibe benutzerdefinierten Link erweitert HTML, Ankerelement. Öffne das hier drin, offensichtlich setze ich den Konstruktor. Dann rufe ich super an, wie wir es immer getan haben. Was ich dazu tun könnte, ist Event-Listener für Klick hinzuzufügen, [NOISE] dies ähnelt dem, was wir zuvor gemacht haben, aber jetzt haben wir das Standardverhalten eines Anker-Tags. Was ich tun werde, ist dies im Grunde zu einem Bestätigungslink zu machen. Ich führe Confirm aus und bitte den Benutzer , zu bestätigen, dass er Google verwenden möchte. Sie möchten Google verwenden, und wenn das dann so falsch ist, wie Sie hier aus diesem Ausrufezeichen sehen können, dann verhindere ich den Standardwert. Ich werde verhindern, dass der Benutzer diesen Link verwendet. Ziemlich einfaches Beispiel dort. Dann exportiere ich das natürlich, und da wir nur eine Klasse exportieren, kann ich hier Standard verwenden. Wir exportieren einen benutzerdefinierten Link, und dann gehen wir in index.js und verwenden das gleiche Format. Ich importiere die benutzerdefinierte Schaltfläche aus component2.js und dann schreiben wir unsere definierte Methode hier unten, also benutzerdefinierte Elemente, definiere, nenne es benutzerdefinierten Dash-Link. Dann setzen wir den Klassennamen ein, ist das zweite Argument. Dann werden wir in unseren Ausführungen hier das Standardankerelement erweitern, das nur als im HTML dargestellt wird. Wenn ich dann zu meiner index.html gehe, importieren wir bereits all diesen Code. Alles was ich tun muss, ist einfach ein Tag hier zu schreiben. Lass es uns wieder zu Google gehen. Um die Funktionalität dieses benutzerdefinierten eingebauten Elements zu übernehmen, muss ich natürlich schreiben und dann innerhalb des schreiben Attributs is in den Namen eingeben, den wir angeben, welcher ist ein benutzerdefinierter Link und dann klicke ich einfach mit der rechten Maustaste , um zu Google zu gehen. Hit „Speichern“ drauf. Lasst uns hier drüben auffrischen. Sie können den Link dort sehen. Wir mussten nicht einmal aktualisieren, da wir Live Server verwenden, der nur eine Funktion in Visual Studio Code ist. Dies nennt man „Hot Reloading“. Wenn ich dann darauf klicke, frage ich mich, ob ich auf jeden Fall zu Google gehen möchte. Wenn ich auf „Abbrechen“ klicke, wird das Standardverhalten verhindert, das mich an diese Adresse weiterleitet. Aber wenn ich darauf klicke und auf „Okay“ klicke, wird es mich dorthin leiten. Die Funktionalität innerhalb der eigentlichen Komponente selbst ist hier jedoch nicht der Punkt. Der Punkt ist, dass wir Klassen aus JavaScript-Dokumenten in andere JavaScript-Dokumente und mithilfe von ES-Modulen in HTML-Dokumente exportieren JavaScript-Dokumenten in andere JavaScript-Dokumente und können. Hoffentlich ist das ein cooles Konzept für euch, das ihr gerade gelernt habt. Im nächsten Video werden wir damit beginnen, dies als praktische Anwendung auszubauen . In diesem Video, vielleicht mehrere Videos, je nachdem, wie lange wir dauern, werden Sie sehen, dass wir ES-Module in Aktion verwenden, und so werden Sie es in den nächsten Videos ein bisschen mehr in der Praxis sehen . Das sind im Grunde alle vier Spezifikationen für die Meta-Spezifikation der Webkomponente. Lassen Sie uns dies im nächsten Video in die Praxis umsetzen und unser eigenes individuelles Projekt erstellen. 10. Web-Komponenten in der Praxis Teil 1: Alles klar, allerseits. Willkommen im praktischen projektbasierten Teil der Klasse. Ich bekomme regelmäßig das Feedback von euch, dass ihr praktischere Beispiele sehen wollt. In diesem Kurs haben wir bisher nicht zu viele von ihnen gesehen, wenn ich ehrlich bin. Ohne dass ein paar Webkomponenten zusammenarbeiten und ohne Anwendungsfall sind, ist es schwierig, tatsächliche praktische Anwendungsfälle von Webkomponenten und viele dieser Spezifikationen zu demonstrieren , die Sie nicht verwenden müssen auf der einen Zeit. Zum Beispiel verwende ich in diesem Projekt, das wir gerade erstellen werden, das Shadow DOM überhaupt nicht weil ich es nicht verwenden muss, es sei denn ich versuche mein Shadow DOM getrennt zu halten und was ich damit meine trennen Sie wie im separaten CSS-Styling auf den Rest meines Projekts. Wenn ich die Kontrolle über mein eigenes Projekt habe, dann habe ich nicht wirklich das Bedürfnis, ein Shadow-DOM erstellen zu müssen, weil ja, vielleicht möchte ich, dass die Stile aus dem Light DOM das Shadow-DOM beeinflussen. Mischen und passen Sie die Funktionen aus Spezifikation an, die für Sie sinnvoll ist. Ich hoffe, dass Sie in dieser Klasse ein paar gute Grundlagen gelernt haben , aber ich wollte eine praktischere projektbasierte Lektion für euch aufnehmen . Dies muss wahrscheinlich in mehrere Lektionen aufgeteilt werden , sodass dies möglicherweise als mehrere Videos innerhalb dieser Skillshare-Klasse angezeigt werden kann. Aber was ich tun möchte, ist ein praktisches Beispiel zu erstellen, das praktischste Beispiel, das ich mir vorstellen kann und das praktische Beispiel verwenden, das wir früher in der Klasse mit dem E-Commerce-Beispiel über Shopify gesehen haben früher in der Klasse mit dem E-Commerce-Beispiel über Shopify um unser eigenes von E-Commerce inspiriertes kleines Projekt zu erstellen, und wenn Sie dieses Projekt weiterführen möchten, verwenden Sie es als Inspiration für etwas, das Sie in der realen Welt verwenden möchten. Fühlen Sie sich frei, dies zu tun. Aber anstatt mehr darüber zu reden, möchte ich einfach direkt hineinspringen und euch mitverfolgen lassen , was ich hier kreiere. Für dieses Projekt werde ich alles in Git festschreiben damit Sie sich diesen Code später ansehen und Ihren Code damit vergleichen können . Das war auch in der Vergangenheit eine Kritik an einigen meiner Klassen, ist, dass ihr den Code nicht wirklich außer in den Videos betrachten könnt. Ich habe euch auch dabei zugehört, und deshalb werde ich mich verpflichten und ihr könnt euch diesen Code auf GitHub ansehen , nachdem dieser Kurs veröffentlicht wurde, und deinen Code mit meinem vergleichen. Sie uns kurzerhand Lassen Sie uns kurzerhand darauf eingehen. Ich erstelle hier im Codeordner einen Projektordner , in dem wir den anderen Ordner erstellt haben. Ich nenne diesen einen Einkaufswagen. Rufen Sie dann Visual Studio-Code auf, greifen Sie dann diesen Ordner, ziehen Sie ihn in Visual Studio-Code und daher weiß ich, dass ich diesen bestimmten Ordner öffne. Offensichtlich werde ich dies auf die volle Breite Ihrer Betrachtung ausdehnen . Los geht's und fangen wir mit unserem Boilerplate-Inhalt an. Also erstelle ich eine neue Datei mit index.html. Dasselbe wie in der Vergangenheit: Verwenden Sie das Ausrufezeichen, um ein HTML-Dokument auszugeben. Nennen wir diesen Einkaufswagen. Dann werde ich einige Assets, CSS und Image-Assets kopieren, weil diese Klasse nicht wirklich auf CSS ist, und natürlich werde ich Sie nicht dazu bringen, Ihre eigenen Bilder zu bekommen, also werde ich es tun CSS und Image-Assets kopieren, weil diese Klasse nicht wirklich auf CSS ist, und natürlich werde ich Sie nicht dazu bringen, Ihre eigenen Bilder zu bekommen, bring die sofort rein. Werfen wir einen kurzen Blick darauf damit Sie wissen, was los ist. Ich habe gerade eine styles.css Datei hier und es hat nur einen Haufen anderen Codes. Dieser ist überflüssig. Aber wir haben hier eine Menge unterschiedlichen Codes, nur um unser Projekt gut zu gestalten. Auch hier konzentrieren wir uns nicht wirklich auf Stile in dieser Klasse, aber es ist viel besser, ein Projekt zu haben , das gut gestaltet ist als ein hässliches. Also habe ich das da drin und dann habe ich hier Bilder, zufällige Produkte. Dies sind zufällige Produktbilder, wie Sie sehen können. Sie sehen alle optisch ähnlich aus, aber es gibt keinen Zusammenhang zwischen Cola Zero und Hanfsamenöl und Red Curry Paste. Ein bisschen zufällig, aber wir brauchten nur ein paar Platzhalterbilder für dieses Projekt. Ich erstelle auch einen JavaScript-Ordner. Klicken Sie zunächst auf „Neuer Ordner“, „js“. In diesem js-Ordner erstelle ich eine index.js. Was ich hier machen werde, ist, weil wir einen Einkaufswagen bauen, ich werde ein Objekt auf dem Fensterobjekt erstellen. Es wird ein globales Objekt namens cart sein, und dann öffne ich ein leeres Objekt, und ich weiß, dass ich in diesem Objekt eine Reihe von Elementen haben möchte , also initialisiere ich das gerade hier. Ich drücke dabei auf „Speichern“, und dies wird wahrscheinlich mein erstes Commit sein. Ich bringe hier ein Terminal auf, führe Git init aus, git add. und dann Git Commit anfängliches Commit. Klar das, und was ich tun werde, ist, dass ich versuchen werde , immer wieder zu verpflichten , damit ihr den Fortschritt sehen könnt und auf den Code verweisen könnt, wenn du willst. Wir haben diesen **** DS Store hier. Ich werd das einfach verwerfen, brauche das nicht wirklich. Zurück zu unserem Code hier, machen wir unseren ersten Schritt zur Erstellung dieses Projekts. Bevor wir das tun, klicken wir tatsächlich auf „Go Live“. Jetzt wirst du sehen, dass wir unsere Datei index.html ausführen. Wir müssen auch diese Stile laden , also hätten wir das wahrscheinlich vor meinem ersten Commit tun sollen. Aber los geht's, link rel="stylesheet“ und dann lautet der Pfad zu diesem Stylesheet css/styles.css. Bevor wir nun irgendeine Funktionalität erstellen, erstelle ich hier nur etwas HTML, also erstellen wir ein Div mit der Containerklasse, ziemlich Standardsachen und dann h1 Einkaufswagen. Was ich dann machen werde, ist ein Div mit der Klasse der zum Verkauf stehenden Produkte, und dann werde ich hier vier Divs erstellen, also div mal 4. Lasst uns dabei auf „Speichern“ klicken. Schauen wir uns hier an, dann können Sie sehen, ob ich auf „Prüfen“ klicke und Produkte zum Verkauf ansehe. Wir haben das gesamte CSS bereit, wenn wir diese Produktelemente in dieses Div genau hier einfügen. Bevor ich irgendetwas mache, lass mich dir einen Überblick darüber geben , was wir hier erstellen wollen. Dies wird unser abgeschlossenes Projekt sein. Wie Sie hier sehen können, haben wir vier Produkte, die wir in unseren Warenkorb legen können Wenn ich unter einem dieser Produkte auf die Schaltfläche In den Einkaufswagen klicke , wird dieser Artikel hier in unseren kleinen Einkaufswagen gelegt. Wenn ich erneut auf diese Schaltfläche klicke, erhöht sich die Menge Wenn ich auf die Schaltfläche „In den Einkaufswagen“ eines anderen Produkts klicke, wird diese Zeile der Tabelle hier hinzugefügt, wodurch die Summe automatisch aktualisiert wird. Denken Sie daran, dass all dies etwa 10 Dollar sind, also ist es ziemlich einfach Mathematik, und ich kann die Menge auch über diese Mengenauswahl aktualisieren, und das wird die Summen gegebenenfalls aktualisieren. Ich kann auch hier reingehen und das auf 10 setzen, wenn ich will. Dann kann ich meine eigene spezifische Menge einstellen. Die Theorie dahinter ist, wenn es ein echter Einkaufswagen wäre, könnte ich auf einen Button klicken und er würde mit dieser Auswahl auschecken. Wenn wir die Seite aktualisieren, verlieren wir für unsere Zwecke unseren Einkaufswagen. Wir könnten etwas Code schreiben, um diesen in den lokalen Speicher oder den Sitzungsspeicher zu behalten . Aber für die Zwecke dieses Videos glaube ich nicht, dass wir das wirklich tun müssen, das könnte eine Verbesserung sein, die Sie in Zukunft vornehmen. Das letzte, was es tut, ist, wenn es eins ist und Sie versuchen, die Menge zu reduzieren, wird dieser Artikel einfach aus dem Warenkorb entfernt. Wenn sich keine Artikel im Einkaufswagen befinden, verschwindet die gesamte Tabelle. Das bauen wir also. Ich lasse den Tab vielleicht zur Seite offen, gehe zurück hierher und lass uns an die Arbeit gehen. Eigentlich noch eine Sache, bevor wir damit anfangen, möchte ich tatsächlich übersehen , wie wir dies in Webkomponenten aufteilen werden. Hier sehen Sie, dass wir jedes dieser Produkte hier haben und die gleiche Funktionalität gibt es für alle. Wenn ich auf die Schaltfläche In den Einkaufswagen klicke, wird dieses bestimmte Produkt in den Warenkorb gelegt, sodass jedes dieser Produkte seine eigene Webkomponente sein wird. Wie Sie sehen können, wenn ich hier aktualisiere, klicke auf „In den Einkaufswagen“. Dieser weitere Abschnitt wird hier hinzugefügt, nämlich unsere Liste der Warenkorbartikel, die Tabelle für Warenkorbartikel. Das wird auch eine Komponente sein. Schließlich haben wir innerhalb dieser Tabellenkomponente für Warenkorbartikel eine weitere Komponente, die hier unser Mengeneingabe-Selektor ist . Jedes Mal, wenn ich auf Plus oder Minus klicke, legen wir hier eine bestimmte Menge fest und setzen sie auf Null. Mal sehen, was passiert, es verschwindet. Das wird auch eine Komponente sein. Beginnen wir mit der Produktkomponente. Gehen wir hierher und gehen dann zu unserem Code-Editor. wir in unserem js-Ordner die Datei für diese Komponente. Ich nenne es product.js. Fangen wir mit dem Boilerplate an. Ich nenne dieses Klassenproduktelement. Natürlich werden wir das HTML-Element erweitern, wie wir es in dieser Klasse gesehen haben. Bevor ich dann irgendeinen Code schreibe, exportiere ich ihn einfach sofort. Da wir ES-Module mit jeder Komponente verwenden in einer eigenen JavaScript-Datei enthalten ist, verwende ich den Exportstandard und schreibe danach einfach den Klassennamen. Drücken Sie „Enter“ und wechseln Sie dann zu meiner Datei index.js Ich setze meinen Import an den Anfang des Dateiprodukteelements und dann direkt vom Pfad zu dieser Datei, die waren bereits im JavaScript-Ordner, also wird es sein.product.js. Dann müssen wir hier eine definierte Methode einsetzen, natürlich definieren benutzerdefinierte Elemente. Ich nenne diese Produktelemente einfach als erstes Argument und bringe dann diese Produktelementklasse ein. Ich muss auch diese Datei index.js in HTML importieren. Vergessen wir das nicht. Script src=“ js/index.js " und dann nicht zu vergessen dieses Typattribut des Moduls. Klicken Sie auf „Speichern“, aktualisieren Sie es hier und prüfen Sie, ob es irgendwelche JavaScript-Fehler gibt, die es nicht gibt. Perfekt. Lass uns zurückgehen. Anstelle dieser vier Divs möchte ich vier Produktelemente machen. Lasst uns auf „Save“ klicken und hier rüber gehen. Wie üblich füge ich die Konstruktormethode hinzu und führe dann super aus. Jetzt müssen wir darüber nachdenken, wie wir unsere benutzerdefinierte Webkomponente hier konstruieren möchten . Wenn ich mir den Code hier ansehe, werden wir diese Webkomponente vier verschiedene Male einbringen . Ich weiß nicht, ob ich meinen inneren HTML-Code in jeden von diesen schreiben möchte , weil es sich ziemlich wiederholen wird. Was ich tun könnte, ist, dass ich die HTML-Struktur hier in die Definition der Webkomponentenklasse einfügen könnte. Auf diese Weise ist es für jede Webkomponente dasselbe , was wir wollen, und das hält unseren Code sauber. Was ich tun werde, ist, dass ich diesen inneren HTML schreibe. Diese Struktur basiert auf dem CSS, das ich bereits eingerichtet habe. Es nutzt Klassen, die bereits im CSS sind. Ich erstelle ein Div mit der Klasse des Image-Containers. Schließen Sie das und dann mache ich das Bild mit einer Klasse von Produktbildern. Dann werde ich das SRC einsetzen , das, sobald wir hier sind, anfangen sollten, bei uns selbst zu denken, das muss ein dynamischer Wert sein. Wenn es sich um einen dynamischen Wert handelt können wir hier nicht wirklich etwas explizit festlegen , denn dann wird das Produktbild für jedes Produkt gleich sein. Offensichtlich wird die Struktur jedes Produktelements gleich sein , aber das Produkt wird sich ändern und damit das Produktbild. Daher werden sich der Titel und die Produkt-ID alle ändern. Jetzt kommen wir zu jedem von denen, wie es kommt. Aber um uns zu beginnen, möchte ich zumindest ein benutzerdefiniertes Attribut für das Image erstellen. Auf diese Weise können wir das Image in jeder dieser Webkomponenten weitergeben . Wir haben dies schon einmal in der Klasse gesehen, als wir uns benutzerdefinierte Attribute angeschaut haben, jetzt können wir es in der Praxis verwenden. Was ich tun werde, ist ein Bildattribut einzufügen und uns hier einen Blick in unseren Ordner zu werfen. Wir machen das zum Pfad zum Bild, image/coke-zero.jpg. Kopieren wir das hier und hier und dann aktualisieren wir das. Der zweite wird Hanfsaatöl sein. nächste wird magische Berührungs-Körper-Creme und dann wird die letzte Rot-Curry-Paste sein . Drücken Sie dabei auf „Speichern“. Was wir dann tun können, ist hier zu unserer Webkomponente zu gehen . Wir können das Image in den Webkomponenten festlegen. Wir setzen eine Variable, die an diese Webkomponente angehängt ist, wie zuvor, erhalten Attribut und wir erhalten den Wert dieses Bildattributs. Da wir diesen Wert haben , können wir dann hier hineingehen und ihn hier in dieses SRC einfügen. Ich klicke auf „Speichern“, aktualisiere hier drüben und mal sehen, was wir haben. Sie werden sich trösten, keine Fehler. Aber du kannst sehen, dass es auch nicht rüberkommt. Ich vermute, dass dies auf einen albernen Fehler zurückzuführen ist. Ja, es ist ein alberner Tippfehler. Sollte Produktelement sein, keine Produktelemente. Geh einfach durch und werde diese S los. Klicken Sie auf „Speichern“ und wenn wir uns hier aktualisieren, müssen wir nicht einmal aktualisieren, weil Sie sehen können, dass es für uns funktioniert. Mal sehen, ob wir die Dinge noch sehen können. Ja. Lassen Sie uns das unten legen und dann können Sie sehen, dass wir unsere Aufstellung der vier Produktbilder haben. Wir haben die gleiche Struktur für jedes Produktelement, das wir hier speichern, aber wir passieren den dynamischen Wert, wo die Bild-URL befindet, und fügen sie dann in unsere Vorlagenstruktur ein hier. Aber wie ich bereits erwähnt habe, ist die Bild-URL natürlich nicht der einzige dynamische Inhalt, den wir in dieses Produktelement weitergeben müssen . Wir brauchen den Titelschrägstrich den Namen des Produkts. Wir brauchen seinen Preis und wir brauchen seine ID. Lassen Sie uns dafür auch einige Attribute erstellen. Lassen Sie uns mit dem nächsten in der visuellen Hierarchie fortfahren. Lass uns mit dem Namen fortfahren. Ich mache genau das gleiche Format, das ich hier gemacht habe. Erstellen Sie eine Variable namens this.name und rufen Sie dann den Wert des Attributnamens ab. Offensichtlich wurde dies noch nicht erstellt. Ich gehe hier hinein, ich werde das schließen, damit wir das besser sehen können, und dann erstelle ich ein Namensattribut für all diese Produktelemente. Dann wird dieser Cola Null sein. Ich setze Klammern ein, kann. Dann hier Hanfsamenöl und dann nenne ich es einfach Körpercreme und dann hier rote Currypaste. Drücken Sie dabei auf „Speichern“. Gehen wir hier rüber und dann müssen wir diesen Namen tatsächlich irgendwo in unserem Code verwenden. Ich kann hier runter gehen und dann kann ich gehen, wie wir es mit dem Bild gemacht haben, ein h2 in diesem h2 erstellen. Ich kann diesen Namen einschieben. Wenn Sie hier aktualisieren, können Sie jetzt den Namen jedes Produkts unter dem Produktbild sehen . Es gibt hier ein paar CSS-Probleme und das liegt daran, dass es sich nicht im Image-Container befinden sollte . Lass mich das reparieren. Es sollte außerhalb dieses Div sein. Ich habe bei dieser Aktualisierung hier auf „Speichern“ geklickt dann kannst du sehen, dass wir dieses Problem nicht mehr haben. Süß. Das macht unsere visuelle Hierarchie aus. Aber das andere, was wir tun müssen, ist tatsächlich einige Daten in diesem Produktelement zu speichern, wenn wir auf „In den Einkaufswagen“ klicken da wir je nachdem, welche Schaltfläche oder welches Element wir auf „In den Einkaufswagen“ klicken auf wird einen anderen Wert haben. Ich werde das tun, anstatt es dem inneren HTML hinzuzufügen Ich erstelle ein Element und füge es dann an das DOM an. Der Grund, warum ich es so mache , ist, dass ich einen Event-Listener anhängen kann , bevor ich ihn an das DOM anfüge. Was ich mache, ist ein Element für den Button zu erstellen. Es wird nur Button sein und dann muss ich das natürlich irgendwo aufbewahren, also werde ich das einfach in der Konstante namens Button aufbewahren . Ich setze den inneren HTML-Code der Schaltfläche zum Warenkorb und füge dann einen Ereignis-Listener hinzu. Eigentlich kommentieren wir das vorerst. Geh in einer Sekunde zurück. Ich füge das einfach an , um zuerst ein Dokument hinzuzufügen. Klicken Sie auf „Speichern“, aktualisieren Sie es hier und Sie können sehen, dass wir unsere Schaltflächen in den Einkaufswagen und ihren Stil haben, genau wie in unserem Beispiel aufgrund des CSS, das wir bereits dort haben. Damit dies funktioniert, müssen wir wissen können, wie der Name und die ID des Produkts sind, das wir dem Warenkorb hinzufügen? Weil dies derzeit nichts tut, und dort werden wir die ID weitergeben aber wir müssen auch wissen, wie hoch der Preis für jedes Produkt ist, der Preis für jedes Produkt ist, damit wir es auch zu unserer Warenkorb-Tabelle hinzufügen können. Wir geben ID und Preis ein. Lassen Sie uns auch Attribute für sie erstellen. Ich beginne in der Komponente, und ich sage, dass dies.id entspricht dies.getAttribute, nicht Animationsattribute, ID und dann this.price, this.getAttribute Preis. Dann gehe ich zu den Elementen hier. Fügen wir für jeden eine ID hinzu. Die erste, die wir 1, 2, 3 und 4 machen werden. Es gibt nur vollständige Produkte, daher brauchen wir nur einfache IDs. Dann füge ich den Preis hinzu. Wir werden es einfach halten und jedem von ihnen 10 Dollar verdienen. Wir geben diese jetzt einfach als Ziffern weiter und wandeln sie später in ganze Zahlen oder Floats um. jetzt zu unserer Webkomponente zurückkehren, ist dies der Teil, in dem wir tatsächlich einige Funktionen einbauen und etwas komplizierter werden. Wie Sie hier sehen können, habe ich einen auskommentierten EventListener. Was ich tun möchte, bevor wir das ausbauen, ist die Methode zu erstellen , die dieser EventListener auslösen wird. außerhalb des Konstruktors Lassen Sie uns außerhalb des Konstruktors unsere eigene Methode namens AddToCart erstellen. In AddToCart erstellen wir ein Objekt mit allen Attributen , die wir einem Warenkorbgegenstand hinzufügen möchten . Ich erstelle ein const item Objekt und du solltest in Kürze sehen, was ich damit meine. Ich füge natürlich einen Schlüssel der ID hinzu und nehme einfach die ID, und nehme einfach die in dieser Webkomponente gespeichert ist. Ich schließe das, damit du mehr siehst. Dann nehme ich den Namen und der entspricht dem Namen, wie er in der Webkomponente festgelegt ist . Menge ist immer gleich eins, da die Schaltfläche In den Einkaufswagen standardmäßig nur eine hinzufügt. Sie können später eine Mengenauswahl zu diesem Element hinzufügen , wenn Sie als Verbesserung möchten. Aber jetzt wird jedes Mal, wenn Sie auf „In den Einkaufswagen“ klicken , nur einen hinzufügen. Ich repariere das auf die Nummer 1, und dann wird der Preis dies.price sein. Werfen wir einen Blick darauf. Wenn wir das tatsächlich ausführen, werde ich nur damit anfangen, nur um zu sehen, dass das Konsolenprotokoll ausgeführt wird, und dann IteMobject, das Objekt, das wir gerade erstellt haben. Hier oben in addEventListener werde ich offensichtlich nach dem Klick „Event“ suchen, und dann führe ich diese AddToCart-Methode aus, und dann binde ich das, so dass wenn ich hier unten bin -Methode , wenn ich darauf verweise, werde ich auf die Webkomponente verweisen , nicht auf das Ereignis. Klicken Sie auf „Speichern“ und aktualisieren Sie hier drüben. Öffnen wir unsere Konsole und wenn ich im Hanfsamenöl auf „In den Einkaufswagen“ klicke, können Sie sehen, dass es die Daten durchsendet. Wir können sehen, dass die Produkt-ID 2 ist, der Name ist Hanfsamenöl. Wir fügen eins hinzu und der Preis von jedem beträgt 10. Wenn ich es auf der Coke Zero Can mache, bekomme ich ein bisschen verschiedene Daten. Wenn ich es auf der Body Cream und Red Curry Paste mache, kannst du sehen, dass ich jedes Mal ein anderes Gegenstandsobjekt bekomme. Das bestätigt, dass wir ein Objekt mit allen Informationen senden , die wir benötigen. Was wir jetzt tun müssen, ist ein bisschen Logik zu schreiben , um es diesem Artikelarray innerhalb unseres Warenkorbobjekts hinzuzufügen . Gehen wir hier rüber und ich zeige Ihnen, wie wir auf dieses Warenkorbobjekt zugreifen können. Da es sich um das Window-Objekt handelt, können wir window.cart eingeben, um es uns anzusehen, oder wir können einfach einen Einkaufswagen schreiben weil wir uns bereits im Kontext von window befinden. Wie Sie sehen können, können wir sehen, dass wir ein Objekt mit einem leeren Element-Array haben . Was wir sehen möchten, wenn wir das erneut ausgeben, nachdem wir in den Warenkorb gelegt haben, ist, dass wir einen neuen Artikel in diesem Artikelarray haben. Das kläre ich. Lass uns das jetzt machen. Ich werde dieses Konsolenprotokoll kommentieren, und was wir in den meisten Fällen tun müssen, ist , dieses Objekt einfach zum Array dieses Elements hinzuzufügen . Wir werden window.cart.items.push ausführen , um dieses Elementobjekt dem Element-Array hinzuzufügen, und dann werden wir das Item-Objekt als Argument dort einfügen . Lasst uns dabei auf „Speichern“ klicken. Aktualisieren Sie hier drüben. Wenn ich jetzt den Warenkorb eintippe, kannst du sehen, dass wir ein Items Array haben, das leer ist. Lassen Sie uns etwas spezifischer werden und konkret Warenkorbartikel sagen. Wir haben ein leeres Array , das klar zu sehen ist. Lass mich das einfach noch einmal machen. Wir haben das Vorher, wenn ich dann auf „In den Einkaufswagen“ klicke und jetzt cart.items eintippe, wirst du sehen, dass wir ein Objekt in unserem Array haben, und wenn ich hineinschaue, ist es unser Hanfsamenöl mit dem Menge von eins. Wenn ich auf Body Cream auf „In den Einkaufswagen“ klicke und dann cart.items gehe, solltest du jetzt sehen, dass wir zwei Artikel in unserem Array mit jedem dieser Produkte haben . Jetzt haben wir ein Problem , von dem ich nicht weiß, ob Sie daran gedacht haben oder nicht, aber Sie werden bald herausfinden , dass dies ein Problem ist. Wenn ich ein weiteres Produkt hinzufüge , das wir bereits in unserem Warenkorb haben, sagen wir noch einmal Hanfsamenöl, und dann gehe ich hin und gehe zum Warenkorb. Artikel, Sie werden sehen, dass wir drei Artikel im Warenkorb haben, und wir haben zweimal Hanfsamenöl, aber mit je einer Menge. Wir möchten einen Artikel im Array für Hanfsamenöl sehen, aber wir möchten, dass diese Zahl zwei ist. Dafür müssen wir ein bisschen zusätzliche Logik schreiben. Gehen wir zurück zu hier und verwenden wir die find-Methode in JavaScript, um herauszufinden ob das Element bereits im Array vorhanden ist. Ich erstelle einen konstanten Artikel im Warenkorb. Dann werden wir nach window.cart.items suchen , dann verwenden wir die Methode find, die das Element durchläuft. Wenn die Item-ID der Item-Objekt-ID entspricht , haben wir eine Übereinstimmung gefunden, und das wird das Objekt sein. Bevor Sie etwas anderes schreiben, machen wir einfach console.log item_in_cart. Es sollte entweder als undefiniert oder als ein anderer Nullwert vorkommen , wenn es tatsächlich etwas finden kann, aber wenn es etwas findet, erhalten wir tatsächlich das Objekt selbst. Erfrischend hier drüben. Klicken wir auf „In den Einkaufswagen“ und es wird als undefiniert angezeigt. Wenn wir jedoch erneut auf „In den Einkaufswagen“ klicken, werden Sie sehen, dass wir das vorhandene Produkt bereits im Warenkorb haben . Wenn go cart.items, sehen Sie, dass wir den gleichen Artikel zweimal im Warenkorb haben. Wir müssen das beheben. Was wir tun werden, ist wenn item_in_cart, dann wollen wir nur den Artikel nehmen, der sich bereits im Warenkorb befindet, und seine Menge einfach um eins erhöhen. Aber wenn es nicht im Warenkorb ist, also wenn es zum Beispiel undefiniert ist, werden wir diesen Code hier unten ausführen, werden wir diesen Code hier unten ausführen um diesen Artikel in den Warenkorb zu schieben. Speichern wir das und schauen wir mal, ob das unser Problem hier behebt. Ich füge Hanfsamenöl hinzu, ich füge Körpercreme hinzu. Werfen wir jetzt einen Blick auf unsere Warenkorbartikel. Wir haben ein Hanfsamenöl und eine Körpercreme. Wenn ich noch einmal eines der gleichen Produkte hinzufüge, das Hanfsamenöl und dann schauen wir uns cart.items an, können Sie sehen, dass wir jetzt nur zwei Artikel in unserem Array haben, und wenn ich darauf klicke, Sie Sie können sehen, indem Sie auf dem Hanfsamenöl auf „In den Einkaufswagen“ klicken, hat es keinen neuen Artikel in unserem Array erstellt , aber es wird einfach die Menge dieses vorhandenen Artikels erhöht , was genau das ist, was wir wollen. hierher zurückkehren, sind das im Wesentlichen alle Funktionen, die wir benötigen, insbesondere aus dem Produktelement. Um es an dieser Stelle zusammenzufassen, bevor wir fortfahren, haben wir eine Webkomponente für Produktelemente erstellt. Wir haben vier Parameter überschritten. Innerhalb der Webkomponente selbst haben wir eine Standardstruktur, die allen Webkomponenten des Produktelements gemeinsam ist , und eine gemeinsame Funktionalität von AddToCart, die wir hier sehen können. Ich werde dieses Konsolenprotokoll entfernen, weil das alles funktioniert , und jetzt können Sie sehen, obwohl wir cart.items noch nicht visuell auf der Seite dargestellt haben , können wir Artikel zu unserem hinzufügen Array für Einkaufswagen Artikel. Das Warenkorbobjekt hier ist im Grunde unser Zustandsobjekt, und wir werden dieses Warenkorbobjekt verwenden , um unsere Warenkorb-Tabelle im nächsten Video zu erstellen. Wie versprochen, werde ich diesen Code festschreiben und verwerfen. Ich hätte das wahrscheinlich in „Get Ignorieren“ setzen sollen. Unstage, geh hier rein, verwerfe das, und dann verbinde ich unsere Änderungen an index.html, index.js und dann natürlich die Erstellung von product.js. Ich werde all diese Änderungen inszenieren und die Commit-Nachricht hinzufügen Produkt-Element-Webkomponente erstellen. Fegen. Ich drücke erneut auf Commit und verwerfe diese Änderungen. Ich werde das in ein anderes Video aufteilen. Im nächsten Video sehen wir uns die Komponente „Warenkorbartikel“ an. 11. Web-Komponenten in der Praxis Teil 2: Alles klar, Leute. Im letzten Video haben wir eine index.js eingerichtet, die unsere geschnittenen Objekte mit dem Element-Array enthält, und wir haben gelernt, wie wir dieses Artikelarray über dieses Produktelement füllen können über dieses Produktelement , das wir im vorherigen Video erstellt haben. und offensichtlich hat das auch eine visuelle Komponente . Wir haben jedes dieser Produktelemente mit diesen Buttons zum Einkaufswagen. Wenn ich auf eine dieser Buttons zum Einkaufswagen klicke, wird unsere cart.items aktualisiert, die wir hier haben, aber das ist noch nicht visuell auf dem Bildschirm dargestellt. Das machen wir in diesem Video. Wir erstellen eine neue Komponente namens Warenkorbartikel. Lasst uns das jetzt machen. Gehen wir in unseren JS-Ordner erstellen Sie eine neue Datei namens cart-items.js. Lassen Sie uns unseren Komponenten-Boilerplate-Code hier in Gang bringen. Warenkorbartikel nennen ich es, und wir werden die HTML-Elementklasse erweitern. Da sind wir los. Ich bin hier versucht, nur benutzerdefinierte Elemente zu schreiben, aber denken Sie daran, dass wir ES-Module verwenden. Stattdessen exportiere ich Warenkorbartikel, und dann mache ich meine definierte Methode hier in der Indexdatei. Definieren Sie hier Warenkorbartikel, Warenkorbartikel. Siehe da, Visual Studio-Code weiß, was ich importieren möchte , und fügt hier automatisch die Eingabeanweisung hinzu. Aber wenn Ihr Code-Editor das aus irgendeinem Grund nicht tut , können Sie diesen Code einfach schreiben. Es ist das gleiche Format wie das, was wir zuvor hatten. Süß. Um diese Warenkorbkomponente auf ein Dokument zu bringen, gehe ich einfach hierher in unseren Container, also ist alles enthalten Ich füge unsere benutzerdefinierte Webkomponente der Warenkorbartikel hinzu. Es wird dort automatisch das schließende Tag eingefügt. Wenn ich jetzt meine Seite hier aktualisiere und es keine Fehler gibt, kann ich zuverlässig feststellen, dass wir das hier in unserem Dokument haben. Wenn ich hier reingehe, siehst du, dass wir unsere Webkomponente für leere Warenkorbartikel hier haben. Lasst uns tatsächlich ein paar Sachen hinzufügen. Lassen Sie uns vorerst Produkte schließen. Gehen wir hier zu unserer Klassendefinition. Offensichtlich werden wir wie immer unseren Konstruktor brauchen, und in unserem Konstruktor werden wir unsere Super-Methode einsetzen. Im Gegensatz zu allen anderen Komponenten, die wir in der Vergangenheit hergestellt haben, werde ich sie jetzt anderen Komponenten, die wir in der Vergangenheit hergestellt haben, für die Konstruktormethode dort belassen . Ich werde unser gesamtes Rendern in eine andere Funktion namens Render einfügen . Warum sollte ich das machen? Der Grund dafür ist, dass wir, wenn wir ein neues Produkt über dieses Produktelement in den Warenkorb legen, zum ersten Mal rendern oder unsere Warenkorb-Tabelle erneut rendern müssen . Es wird praktisch sein, unsere Renderfunktion hier zu haben , damit wir jederzeit wieder rendern können. Der gesamte Code in dieser Renderfunktion wird nicht ausgeführt, wenn die Komponente „Warenkorbartikel “ auf der Seite enthalten ist, wie wir es hier haben, wird tatsächlich ausgeführt , sobald wir sie ausdrücklich zum Rendern aufgefordert haben. Das wird eine Menge Code sein und ich werde nicht sehr ausführlich auf alles eingehen, aber ich werde es erklären, während ich gehe. Was ich mache, ist einen Ausgangspunkt für diese Warenkorbkomponente zu erstellen . Ich setze den inneren HTML-Code auf nichts, wenn wir rendern ausführen. Nun, die Absicht ist wenn wir Render in Zukunft ausführen, müssen wir den Inhalt löschen, den wir zuvor hatten, sonst könnten wir einen Teil des alten inneren HTML in unserer Komponente haben des alten inneren HTML in , wenn wir muss den Einkaufswagen erneut rendern. Was ich dann tun werde, ist ein HTML mit Document create zu erstellen, die zweite Methode, die wir im früheren Video auf drei Möglichkeiten gesehen haben , HTML in unserer Webkomponente zu erstellen. Ich habe vergessen, den Namen der Variablen hier einzugeben. Ich nenne diesen Ein-Tabellen-Container. Dann füge ich die Klasse des Tabellencontainers zu diesem Tabellencontainer div hinzu, und dann heißt das zweite Element, das ich erstellen werde , Tabelle. Dies ist unsere tatsächliche Warenkorb-Tabelle. Um ein Tabellenelement zu erstellen, weisen Sie es hier der Tabellenkonstante zu. Was wir dann tun werden , ist, dass wir alle Artikel des Einkaufswagens durchlaufen. Ich werde jeweils eine Vier dafür laufen. Ich werde hier zwei Argumente haben, eines für das Element selbst, damit es das Element selbst ist, und dann wird das zweite der Index sein. Lassen Sie mich einfach in einer Sekunde darauf zurückkommen bevor ich in diesen tiefen Code gehe. Was ich machen werde, ist table_container. Was ich tun möchte, ist, unsere Tabelle an diesen Tabellencontainer anzuhängen , und dann hängen wir den Tabellencontainer an unsere Webkomponente an. Hier ist ein bisschen los, aber ertrag mit mir. Was wir tun, ist, dass wir im Grunde erstellt haben, wenn ich hier speichere und dann aktualisiere. Jetzt wird es nicht wirklich gerendert, weil, denken Sie daran, dass dies in der Render-Methode enthalten ist, es ist nicht wie zuvor auf dem Konstruktor. Was wir tun müssen, ist etwas Code auszuführen, um die Webkomponente zu finden , nach der wir suchen, nämlich Cart-Items, und dann die Render-Methode darauf auszuführen. Wenn ich jetzt wieder hierher gehe, kannst du sehen, dass wir in unseren Einkaufswagen ein div mit der Klasse des Tischbehälters haben werden und im Inneren werden wir den Tisch haben. Das machen wir hier, wir erstellen diese HTML-Struktur. Was wir jetzt tun werden, ist für jedes Element im Array, wir hinzufügen werden. Ich werde den inneren HTML-Code abrufen, und ich werde das Plus gleich verwenden um hier an unsere Zeichenfolge anzuhängen, lasst uns das öffnen und ich füge hintereinander für jeden Einkaufswagen in unserem cart.items Array. Lasst uns das in Aktion sehen. Wenn ich auf „Speichern“ klicke und hier rübergehe, und lass uns diese Rendermethode erneut ausführen, gehe hier zurück, finde unseren Warenkorb Artikel Tabellencontainer und in unserer Tabelle wirst du sehen, dass es noch keine Zeilen in der Tabelle gibt aber das liegt daran, dass wir tatsächlich nichts in unserem cart.items Array haben . Wenn ich cart.items gehe, ist da nichts drin. Wenn ich, sagen wir mal, zwei Elemente zu unserem Array hinzufügen würde, schauen wir uns jetzt an, cart.items. Wir haben jetzt definitiv zwei Artikel in unserem Array. Wenn ich Render für Warenkorbartikel ausführen sollte, gehen Sie zurück in Elemente, gehen Sie in unsere Tabelle, Sie können sehen, dass wir zwei Zeilen haben. Jetzt müssen wir natürlich jede dieser Zeilen mit den Daten für jeden dieser Warenkorbartikel füllen , und das werden wir gerade tun. Auch hier wird es ziemlich viel Code geben , aber ertragen Sie mich. Wir brauchen drei Tabellenzellen. In der ersten Tabellenzelle geben wir den Elementnamen ein. Natürlich haben wir Zugriff auf jedes Element, während wir ihn durchlaufen, denn das haben wir hier festgelegt. Ich sage den Artikelnamen. Dann haben wir hier eine Mengeneingabe. Darauf kommen wir ein bisschen später hin. In diesem Fall haben wir $sign und dann haben wir unseren Artikelpunktpreis. Wir werden das in einer Sekunde beheben da dies der Linienpreis sein muss. Wenn die Menge also größer als eins ist, müssen wir dies aktualisieren. Was ich dann mache, ist nur ein bisschen Formatierung . Der erste TD. Ich möchte, dass der Text links ausgerichtet ist, aber das ist Standard, also werde ich dort nichts ändern. In der zweiten werde ich den Text an der Mitte ausrichten. Dann das letzte Mal, den ich den Text ausrichten werde , auf rechts. Wenn ich jetzt auf „Speichern“ klicke, denke ich, dass es sowieso automatisch neu geladen wird. Ich habe auf zwei dieser Buttons auf „In den Einkaufswagen“ geklickt. Dann führe ich die Renderfunktion aus. Sie können hier sehen, dass wir die Anfänge unserer Tabelle haben. Wir haben den Namen des Produkts , das in der Kürzung steht, und den Preis. Aber wenn ich diesen noch einmal treffe, haben wir natürlich nur zwei Elemente im Array. Es aktualisiert weder die Menge noch den Linienpreis. Bevor wir also die hier ausgewählte Menge erstellen, kann ich einfach die Artikelmenge eingeben. Während wir hier sind, lassen Sie uns diesen Preis, den Linienkurs, festlegen . Nennen wir einfach diesen Zeilenkurs. Das wird gleich sein, um sicherzustellen, dass wir dies in die Schleife stecken. Der Positionspreis entspricht dem Artikelpunktpreis mal nach Artikelmenge. klicke ich auf „Speichern“. Aktualisieren Sie hier drüben, fügen wir einige Artikel in den Warenkorb. Ich habe gerade „In den Einkaufswagen“ auf Hanfsamenöl, dann auf Körpercreme und dann wieder auf Hanfsamenöl gedrückt dann auf Körpercreme , also sollten wir zwei Artikel in unserem Array sehen. Wenn ich hier runter gehe, siehst du, dass unsere Auswahl gespeichert wurde. Wenn wir render ausführen, können wir sehen, dass es in unserer Tabelle hier unten angezeigt wird. Jedes Mal, wenn wir die Renderfunktion selbst ausführen müssen , wollen wir das natürlich nicht tun. Wir erwarten nicht, dass der Benutzer in seine Konsole geht und weiß, welchen Befehl ausgeführt werden soll. Lassen Sie uns das also so einrichten, dass es in unserem Produkt dot js läuft. Nachdem wir in den Warenkorb gelegt haben, füge ich hier eine Zeile hinzu. Wir können diese Linie buchstäblich einfach nehmen und dort platzieren. Klicken Sie auf „Speichern“, aktualisieren Sie hier drüben. Jedes Mal, wenn wir auf „In den Einkaufswagen“ klicken, wird der Warenkorb erneut gerendert. Das nervt mich ein bisschen. Ich möchte diese Webkomponente in ihren eigenen Variablen speichern , also erstelle ich dafür eine Variable. Ich gehe hier hoch und mache diesen Punktwagen-Artikel gleich und nehme dann das Element des DOM. Das fühle ich mich, dass es nur ein bisschen sauberer ist. Nochmal, ich muss es nicht so machen, aber ich mag es ein bisschen besser. Der nächste Teil, den ich machen werde, bevor ich Kodierung der Mengeneingabe fortfahre , besteht darin, die Tabellenfußzeile zu erstellen. Wenn ich es mir jetzt ansehe, haben wir eigentlich nicht die Summe und dafür erstellen wir eine Tischfußzeile. Ich entferne das einfach dort. Lass uns in den Warenkorb gehen Artikel dot js. Wir sind schon da. Nach diesem Code werde ich dann ein neues Element namens Footer Document erstellt Element erstellen . Das wird ein Div sein. Dann muss ich auch die Gesamtsumme des Einkaufswagens herausfinden. Also muss ich hier eine kleine komplizierte Methode verwenden , Punkt-Cart-Punkt-Artikel, und dann die Reduce-Methode ausführen um alles zu erreichen. Wenn das Sie verwirrt, studieren Sie einfach die reduzierte Methode, aber es ist eine Möglichkeit für uns, alle Werte zu addieren, um eine Summe zu erstellen. Was ich tun werde, ist die Preise als Strings durchlaufen werden, weil wir sie hier als String in unserem HTML-Code durchgemacht haben, wir müssen sie nur in ganze Zahlen übergeben. Nun möchten wir diese vielleicht in Floats übergeben, wenn wir Dezimalwerte hätten , aber für dieses Projekt werden wir keine Dezimalwerte haben. Der niedrigste Betrag wird eins sein und er wird in einem steigen, also wird nichts 2,75 Dollar oder ähnliches betragen. Wir werden es einfach halten. Es wird 10 Dollar oder 20 Dollar betragen. Eigentlich wird alles in diesem Projekt 10 US-Dollar betragen , also halten wir es sehr einfach. Aber nur damit du es weißt, musst du das vielleicht ändern. Aber für unsere Zwecke wird alles eine ganze Zahl sein, also können wir Pars int machen. Lass mich das ein bisschen mehr für dich aufmachen. Dann werden wir in den Pars int den Gesamtpreis des Add-Artikelpunkts um die Artikelpunktmenge nehmen den Gesamtpreis des Add-Artikelpunkts , was natürlich der Zeilenpreis ist, den wir hier oben bereits berechnet haben. Im zweiten Parameter werden wir Null durchmachen. Was wir also tun können, ist den inneren HTML-Code der Fußzeile auf zu setzen, lassen Sie uns hier etwas HTML-Code eingeben. Lassen Sie uns einen anderen Tisch einlegen , der mit der ersten Tabelle übereinstimmt. Ich gebe diesem eine Klasse der Warenkorb-Fußzeile. Dann werden wir eine neue Reihe einreihen. Dann legen wir hier eine Zelle ein, die nur das Wort Gesamt haben wird. Dann legen wir eine andere Zelle für die Summe selbst ein. Ich werde den Textstil einsetzen, ausrichten. Es stimmt mit dem Linienkurs hier überein. Dann können wir hier unseren dynamischen Wert setzen. Also lege ich zuerst ein tatsächliches $ -Zeichen und dann signiere $ geschweifte Klammern, um sie in unseren Warenkorb zu legen, was wir gerade berechnet haben. Dann hier unten hängt dieser Punkt die untergeordnete Fußzeile an. Ich klicke auf „Speichern“ und dann aktualisieren wir uns hier drüben. Wenn ich auf „In den Einkaufswagen“ klicke, siehst du, dass unsere Gesamtsumme hier angezeigt wird. Ich kann die Mengen noch nicht reduzieren, aber Sie können sehen, dass wir zumindest Artikel in den Warenkorb legen können. Unsere Warenkorb-Tabelle wird aktualisiert, komplett mit der Summe, so dass wir gerade für die Warenkorbartikel, Tabellenkomponenten hier abdeckt . Die letzte Komponente wird die Mengeneingabekomponente sein , die innerhalb der Curt Items Komponente verschachtelt wird . Ich breche das in ein eigenes Video auf, also werden wir das im nächsten Video behandeln. Dann nehmen wir unsere letzten Änderungen , um dieses Projekt abzuschließen. Ich werde euch beim nächsten erwischen. 12. Web-Komponenten in der Praxis Teil 3: In diesem dritten und hoffentlich letzten Video dieser Serie, in dem wir diese benutzerdefinierte Warenkorb-Funktionalität erstellen, codiere ich die Mengeneingabe. Eine Sache, die ich vergessen habe, bevor wir das letzte Video geschlossen haben , war, diesen Code für euch zu verpflichten, also mache ich das jetzt. Ich verwerfe diesen DS Store einfach wieder und schaue mir hier nur die Änderungen an. Ich mache das immer gerne, bevor ich mich verpflichte. Ich werde all diese inszenieren und die Commit-Nachricht wird ausgeschnittene Elemente erstellen. Das ist engagiert. Wirf das nochmal weg. Lassen Sie mich einige davon schließen. Ich werde sie wahrscheinlich wieder öffnen müssen, aber hier ist zu viel los. Gehen wir hier in unseren js-Ordner und erstellen die Mengeneingabekomponente. Auch hier, beginnend mit dem Boilerplate-Code, solltet ihr damit inzwischen ziemlich vertraut sein. Mengeneingabe erweitert HTML-Elemente. Dann exportieren wir es sofort. Exportieren Sie Standard, Mengeneingabe und gehen Sie dann in index.js. Ich schreibe zuerst meine benutzerdefinierte Elemente-Methode , weil ich weiß, dass sie sie automatisch importieren wird. Nennen wir das mit dem erweiterten Namen Quantity-Input. Magic VS Code hat diese Eingabeanweisung für uns hineingelegt diese Eingabeanweisung für uns hineingelegt , damit ich das schließen kann. Für dieses spezielle Element werde ich im Grunde alles im Konstruktor konstruieren, wie wir es zuvor in dieser Klasse gesehen haben. Es wird hier ziemlich viel Code geben und wenn Sie sich fragen, wo ich alle Ideen dafür habe, habe ich das Dawn-Thema von Shopify tatsächlich als Inspiration genommen . Ein Großteil dieses Codes ist von demselben Code innerhalb dieser Komponente innerhalb des Shopify-Dawn-Themas inspiriert demselben Code innerhalb dieser Komponente innerhalb . Wenn Sie dies dagegen referenzieren oder sich fragen möchten, woher mein Denkprozess es kommt, können Sie sich dieses Thema ansehen. Wie üblich werden wir hier die Super-Methode einsetzen und dann werde ich den gesamten HTML-Code in der cart-items.js schreiben . hier oben scrollen, schreiben wir bisher nur die Artikelmenge so, wie sie in dieser zweiten Spalte steht, aber natürlich können wir sie nicht aktualisieren, da dort keine Eingabe vorhanden ist. Ersetzen wir dies durch unser neues benutzerdefiniertes Element, Mengeneingabe für das schließende Tag. Ich werde den gesamten inneren HTML-Code innerhalb der Tags selbst erstellen . Wir haben das offensichtlich nicht für das Produktelement hier gemacht, weil wir es nicht vier verschiedene Male ausschreiben mussten. Im Falle der Mengeneingabe schreiben wir es jedes Mal aus, schreiben wir es jedes Mal aus wenn eine Zeile in der Tabelle vorhanden ist, und jede Zeile wird praktisch gleich aussehen. Der einzige Unterschied sind die Daten, die in dem Artikel durchkommen. Wir können es hier platzieren und es wird immer noch DRY-Code sein. Hier lege ich nur eine Quantitätsklasse ein. Wenn du siehst, dass ich solche Klassen schreibe, hängt es mit dem CSS zusammen, also mach dir keine Sorgen um die Klassen. Dann erstellen wir unsere beiden Buttons, unseren Minus-Button, unsere Eingabe selbst. Offensichtlich gibt es noch viel mehr Sachen , die hier reingehen müssen, aber ich fange einfach zuerst mit der Grundstruktur an. Wir haben einen Eingabetaste. Werfen wir einen Blick darauf, wie das aussieht. Sie können dort die grundlegende Struktur sehen, aber natürlich müssen wir das Minus zwischen diesen Button-Tags und dann das Plus zwischen diesen Button-Tags einfügen zwischen diesen Button-Tags und . Für die Attribute geben wir ihm eine Klasse, wir werden sie hier auf beide Schaltflächen setzen, Klasse der Quantity__button. Ich werde das schließen , damit wir besser sehen können. Geben Sie die Schaltfläche ein. Wir können das auf beide setzen, geben Sie die Schaltfläche ein, und dann wird der Name darauf basieren, wo es Minus oder Plus ist. Ich entkomme da raus und dann setze ich Minus in den ersten und dann plus in den zweiten. Lasst uns auf „Speichern“ klicken und sehen , wie das bisher aussieht. Es sieht so aus, als hätten wir einen Treffer „Speichern“ dabei. relevant sollte es sowieso nicht sein. Klicken Sie auf „In den Einkaufswagen“ und wie Sie jetzt sehen können, haben wir unsere Styles für die Plus- und Minuspunkte. Wir müssen hier in unseren Eingabe-Tags hier etwas Code hinzufügen. Fügen wir ein paar Attribute hinzu. Wir möchten, dass der Typ Zahlen ist, damit die Leute den Warenkorb verwenden, der hier einen anderen Text als Ziffern einfügt. Der Wert wird gleich dem item.quantity sein. Das Minimum wird Null sein. Wir wollen keine negativen Werte. Wir geben ihm eine ID und die ID beginnt mit der Menge und dann werden wir einen Bindestrich setzen und dann den Index verwenden , um jede der Eingaben zu unterscheiden. Dann lege ich auch hier einen Datenindex ein, der das Gleiche sein wird. Wir werden das I als Datenindex verwenden. klicke ich auf „Speichern“. Aktualisieren Sie hier drüben, klicken Sie auf „In den Einkaufswagen“ und wie Sie sehen können, sieht das so aus, als würde es funktionieren. Das einzige, was nicht funktioniert, ist, dass wir nicht addieren und subtrahieren können. Wenn ich das auf zwei ändere, wird es die beiden nicht ändern. Wenn ich das auf Null ändere, ändert es nicht wirklich die Null. Dort müssen wir anfangen, unsere Mengeneingabe hier innerhalb ihrer Klassendefinition zu codieren . Lassen Sie uns ein paar Dinge in unserem Konstruktor einrichten. Ich möchte die Eingabe zuerst in eine eigene Variable bringen. Das werden wir innerhalb des DOM innerhalb unserer Webkomponente finden . Dann werde ich einen onButtonClick erstellen, der der Rückruf für unseren EventListener sein wird. Ich füge das Ereignis als einzigen Parameter hinzu. Ich werde jedes Standardverhalten verhindern, und dann schreibe ich hier etwas Logik , damit das funktioniert. Das erste, was ich tun möchte, ist, den vorherigen Wert zu erfassen, den Wert, bevor wir ihn ändern, und das wird zum Zeitpunkt dieses Laufens einfach dem Eingabewert entsprechen . This.Input repräsentiert das Eingabeelement selbst, und wir können natürlich den Wert jeder Eingabe erfassen , indem wir uns einfach die Punktwerteigenschaft ansehen. Es wird den Wert gewinnen, bevor wir ihn ändern, und dann werden wir uns das Event ansehen und uns die Ereignisziele ansehen. Das Ereignisziel in dieser Instanz wird die Schaltfläche sein, auf die wir klicken. Dann schauen wir uns den Namen des Ereignisziels an, dh die Schaltfläche, und wenn es Plus ist, verwenden wir hier nur einen ternären Operator, um den Schritt für die Eingabe zu erhöhen. Step-Up ist nur eine Methode, die es uns ermöglicht , den Wert dieser Eingabe um eins zu erhöhen. Wenn es nicht Plus ist, was bedeutet, dass es definitiv minus ist, weil es nur zwei Optionen gibt, werden wir stattdessen Schritt nach unten laufen. Wenn ich jetzt auf „Speichern“ klicke, jetzt wo wir unseren Event-Handler hier haben, hängen wir das tatsächlich an alle Schaltflächen an. Da es mehrere Schaltflächen gibt, verwenden wir für jeden Button einen QuerySelectorAll, der sich auf beiden und am Ende befindet, aber wir müssen dennoch querySelectorAll verwenden. Das wird uns ein Array geben und dann müssen wir sie durchlaufen. Für jede Schaltfläche fügen wir einen EventListener von click hinzu. Wenn auf die Schaltfläche geklickt wird, führen wir diesen Ereignishandler beim Button-Klick aus. Genau wie zuvor werden wir dies so binden , dass dies die Webkomponente und nicht das Ereignis darstellt. Entferne das Semikolon dort und lege es dort hin. Wenn ich auf „Jetzt speichern“ klicke und hier aktualisiere, klicke auf „In den Einkaufswagen“, kann ich das auf - und absteigen lassen, aber was passiert nicht? Eigentlich, wenn ich Minus drücke, geht es unter. Das ist nicht sehr hilfreich, oder? Ich denke, das hängt wahrscheinlich mit diesem Tippfehler zusammen. Dies ist kein Vergleich, dies ist eine Aufgabe, also lassen Sie mich das zu einer ordnungsgemäßen Aufgabe machen. Gehen wir zurück klicken Sie auf „In den Einkaufswagen“. Wenn ich jetzt nach unten drücke, sollte es funktionieren. Jetzt geht es darum, der Wert innerhalb dieser dass der Wert innerhalb dieser Eingabe mit diesen Tastendrücken auf und ab steigt, was gut ist, aber der Wert in unseren Daten nicht wirklich verändert -Struktur. Sagen wir einfach, ich habe das auf sieben gesetzt, und dann lasst uns tatsächlich zu unserem Array für Einkaufswagen gehen und einen Blick hinein werfen, Sie können sehen, dass die Menge immer noch eins ist. Wir können die Menge erhöhen, indem hier auf „In den Einkaufswagen“ drücken und wie Sie sehen können, wird sie jetzt auf zwei aktualisiert. Wenn ich dann in den Einkaufswagen gehe, kann ich hierher gehen und es ist Menge 2, aber das Auf- und Ablegen ändert eigentlich nichts. Lasst uns das sofort reparieren. Die Art und Weise, wie ich das beheben werde, ist die Verwendung eines benutzerdefinierten Ereignisses. Warum verwende ich hier ein benutzerdefiniertes Ereignis? Nun, ich möchte ein Änderungsereignis für die Menge auslösen. Was ich tun werde, ist, dass ich die Zeile des Artikels, den ich ändern möchte, und seine neue Menge auf eine Methode weitergeben die Zeile des Artikels, den ich werde, und dann wird diese Methode cart.items aktualisieren. Jetzt können wir diese Methode in die Mengeneingabe einfügen, aber ich denke, es ist sinnvoller, sie in Cart-Items zu legen weil es wörtlich cart.items aktualisiert, das Objekt, auf das sich diese Komponente bezieht. Ich lege es vor dem Rendern hier rein. Was diese Methode tun wird, nenne ich sie Update-Quantität. Es wird einen Index benötigen, der sich hier auf den Einzelposten bezieht. Wie Sie hier sehen können, fahren wir durch ein Array und wir speichern auf der Menge wählen Sie aus, um welche Nummer im Array es sich handelt. Ich kann damit die Zeilennummer herausfinden. Dann wird der zweite Parameter der neue Wert sein , den ich nur value als Parameter aufrufe. Wenn dies dann mit diesen beiden Parametern ausgeführt wird, werde ich dann das Element über seinen Index nachschlagen das Element über seinen Index nachschlagen und dann einfach die Menge dieses Artikels nehmen und dann ändern welchen Wert wir auch durchlaufen. Wenn das aktualisiert wird, werden wir dann die Tabelle für Warenkorbartikel erneut rendern, da wir den Linienpreis offensichtlich erneut rendern müssen und wir die Summe erneut rendern müssen wenn wir es sind wenn Sie diese Aktualisierungen vornehmen, ist es besser, die gesamte Tabelle erneut zu rendern. Ich klicke dabei auf „Speichern“ und dann werde ich auf Artikel des Einkaufswagens verweisen. Wie wir bereits beim Produkt gesehen haben, lege ich es zuerst in eine eigene Variable ein, lege ich es zuerst in eine eigene Variable bevor ich die Zufallsmethode darauf ausführe. Da wir dafür eine Methode ausführen werden, möchte ich etwas Ähnliches machen, das im Konstruktor einrichten, also werde ich das hier aufstellen. Wenn wir dann mit Button-Klick laufen , werden wir offensichtlich den Mengenwert ändern. Da wir diese Webkomponente dieser Variablen hier zugewiesen haben , kann ich diese.cart Artikel ausführen und die Methode für diese Webkomponenten ausführen, damit ich die Menge aktualisieren kann, und dafür kann ich muss nur herausfinden, was der Index ist. Ich gehe zu diesem Input-Datensatz-Index, damit ich hier auf diesen Datenindex zugreifen kann. Dies ist im Datensatz-Array verfügbar. Ich hole mir diesen Index. Dann werde ich als zweites Argument this.input.value angeben. klicke ich auf „Speichern“. Jetzt lasst uns hier aktualisieren. Klicken Sie auf „In den Einkaufswagen“. Wie Sie sehen können, wird ich, wenn ich dies abnehme und erhöht, wenn ich dies abnehme und erhöht, die Tabelle der gesamten Warenkorbartikel neu rendern die Tabelle der gesamten Warenkorbartikel und den Gesamt- und den Linienpreis ändern. Jetzt fehlt hier noch eine Sache, und wenn ich das in zwei ändere, wird es nichts ändern. Wenn ich darauf zurückgehe, wird es es ändern, aber wenn ich einen bestimmten Wert einfüge, wird es das nicht ändern. Lassen Sie mich diesen Code ein bisschen mehr umgestalten. Was ich hier machen möchte, ist, dass ich ein individuelles Ereignis erstellen möchte. Denken Sie daran, als wir früher über benutzerdefinierte Ereignisse gesprochen haben, war es nicht wirklich sinnvoll, weil wir nur einen Klick verknüpft und diesen in ein anderes benutzerdefiniertes Ereignis umgewandelt haben. Aber dieses Mal haben wir zwei Möglichkeiten, den Eingabewert zu ändern, dh die Menge in diesem Fall. Wir können einen bestimmten Mengenwert festlegen, oder wir können hier Plus- und Minus-Buttons verwenden. Was ich tun möchte, ist, diese beiden Ereignisse zu einem eigenen Ereignis zu kombinieren , das ich als Change-Event bezeichnen werde. Das ergibt Sinn. Lass es uns in Aktion sehen. Zuallererst werde ich dieses benutzerdefinierte Ereignis erstellen. Ich gehe zu dies.changed-Ereignis wird sein, wie wir zuvor beim Erstellen benutzerdefinierter Ereignisse gesehen haben, erstellen wir ein neues Ereignis, geben ihm einen Namen und dann möchte ich dieses Mal ein JavaScript-Objekt hinzufügen sprudelnd. Ich möchte Blasen auf wahr setzen. Was dies tun wird, ist, dass es auch ein Änderungsereignis in der Webkomponente der Eltern registrieren wird, weil ich möchte, dass es hier registriert wird. Dann erstelle ich hier einen Ereignis-Listener für das Change-Ereignis für diese bestimmten Webkomponenten. Ich werde hier ändern und hier eine Funktion erstellen. Ich hole mir den Input. Es wird hier das Change-Event sein. Was ich dann machen werde , ist, dass ich die Update-Menge hier einfüge. Anstatt diese Methode ausführen zu müssen, wenn wir den Button-Click-Ereignishandler ausführen, und dann auch den Ereignishandler, wenn wir das Element explizit ändern, wie zuvor, wie wir es zuvor getan haben den Button-Click-Ereignishandler ausführen, und dann auch den Ereignishandler, wenn wir das Element explizit ändern, wie zuvor, wie wir es zuvor getan haben Dies, ich werde dieses Änderungsereignis sowohl beim Button-Klick als auch bei dieser Eingabeänderung auslösen. Lassen Sie mich das einfach hier schreiben, und ich werde mich mit der Eingabe befassen, weil wir dort einige seiner Attribute verwenden müssen. Dann werde ich dieses benutzerdefinierte Ereignis versenden, also dieses Änderungsereignis. Da wir dann auf die spezifische Eingabe schauen, kann ich, anstatt hier nichts zu haben was ich tun kann, das Ereignis durchlaufen, und anstatt mir diese Eingabe anzusehen, kann ich einen Verweis auf die Sie hier basierend auf dem aktuellen Ziel des Ereignisses ein. Tut mir leid, ich habe vergessen, den Auftrag da reinzulegen. Dann können wir diesen Punkt von jedem von diesen entfernen. Lasst uns auf „Speichern“ klicken und mal sehen, ob das funktioniert. Ich öffne meine Konsole nur für den Fall, dass es Fehler gibt . In den Warenkorb legen. Leg das auf, nimm das hin. Es funktioniert nicht, weil wir auf Ereignisse in der Webkomponente suchen , die nicht in der Eingabe enthalten sind. Was ich tun werde, ist hier einfach einen zusätzlichen Parameter mit einem JavaScript-Objekt hinzuzufügen , und ich setze Blasen auf „true“. Auf diese Weise springt das Änderungsereignis bis zur Mengeneingabekomponente selbst. Lasst uns auf „Speichern“ klicken, hier aktualisieren und mal sehen, ob das jetzt funktioniert. Sie können keine Eigenschaften einer undefinierten Einstellmenge festlegen, schauen wir uns mal an. Werfen wir einen Blick darauf, was hier durchkommt , Konsolenprotokolleingabe. Werfen wir einen Blick darauf. Das durchläuft die Webkomponente selbst. Das muss daran liegen, dass wir zu der Webkomponente sprudeln , die die Änderung auslöst, und dann wird das aktuelle Ereignisziel in dieser Instanz zur Webkomponente selbst und nicht zur Eingabe. Wir können das beheben, indem wir einfach unsere ausgewählte Abfrage verwenden , um diese Eingabe auszuwählen. Lasst uns auf „Speichern“ klicken , hier aktualisieren, auf „In den Einkaufswagen“ klicken und dann haben wir das gleiche Ergebnis wie zuvor. Dies aktualisiert unsere Mengen und aktualisiert auch unseren Warenkorb. Wie Sie sehen können, funktioniert das nicht. Lass mich das einfach in zwei ändern und dann auf „Tab“ drücken. Wie Sie sehen können, wird es dadurch auf den expliziten Wert geändert. Wie Sie sehen können, nutzen wir, da Änderung bereits ein Ereignis für diese Eingabe ist, da Änderung bereits ein Ereignis für diese Eingabe ist, auch das vorhandene Ereignis, das ausgelöst wird , wenn wir es explizit ändern. Wir fügen im Grunde unseren Button-Klick in das Change-Ereignis ein. Dies geschieht automatisch, wir müssen nicht einmal ein Änderungsereignis registrieren wenn wir diesen Wert explizit ändern, dies geschieht einfach automatisch. Dies ist ein gutes Beispiel dafür , wie wir ein benutzerdefiniertes Ereignis auf etwas markieren können , das bereits existiert. Um das zu bereinigen , haben wir diesen vorherigen Wert hier. Es wird davon ausgegangen, dass wir, wenn wir auf eine Schaltfläche klicken, einen Wert ändern, aber nur um sicher zu sein, dass ich hier eine if-Anweisung hinzufügen werde . Wir werden nur prüfen, ob der vorherige Wert nicht dem neuen Wert entspricht. Wenn ich speichere, aktualisiere, sollten wir das gleiche Ergebnis erzielen wie wir. Das ist nur ein zusätzlicher Scheck. Das ist im Grunde genommen Leute. Wir haben unsere drei Webkomponenten hier. Wir haben unser Produktelement, und wenn ich bei einem dieser Artikel auf „ In den Einkaufswagen“ klicke, interagiert es mit unserer Warenkorbkomponente. Ich kann diese Mengeneingaben verwenden , um die Preise hier zu ändern. Eigentlich haben wir nicht getan, wenn es Null erreicht , wollen wir das entfernen, und wenn die Gesamtzahl Null erreicht , möchten wir die Tabelle ganz entfernen. Ich dachte, wir wären fertig, aber wir haben nur noch eine Sache zu tun, deshalb solltest du immer mit deinen Projekten herumspielen und sehen. Gehen wir in cartitems.js und schreiben wir hier etwas zusätzlichen Code ein. Ich scrolle nach unten. Das erste, was ich tun werde, ist, wenn die Warenkorbsumme Null ist, nun, eigentlich werde ich das Gegenteil machen. Wenn die Warenkorbsumme nicht Null ist, rendern wir die Fußzeile. Wenn die Warenkorbsumme jedoch Null ist, wird dieser Code überhaupt nicht ausgeführt, was bedeutet, dass wir keine Warenkorb-Fußzeile haben wenn diese Renderfunktion ausgeführt wird. Daran spare ich. Was ich dann auch mache, ist, dass ich hier einen ähnlichen Check mache. Kurz nach dem Zeilenpreis werde ich die Zeile nicht zur Tabelle hinzufügen, es sei denn die Artikelmenge ist größer als Null. Wenn es nicht Null ist, werden wir diesen Code ausführen, also schnapp dir das und lege ihn hierher. Drücken Sie dabei auf „Speichern“. Wenn wir nun etwas in den Warenkorb legen, erhöhen Sie die Menge, aber gehen Sie dann wieder auf Null, wodurch das entfernt wird. Sagen wir einfach, wir haben mehrere hier und wir entfernen alle von ihnen aus dem Warenkorb, dann verschwindet der gesamte Warenkorbtisch nicht, es ist nur diese Zeile. Wir können alle hinzufügen, einige von ihnen entfernen, die Menge erhöhen. Wenn dies eine voll funktionsfähige App mit aktivierten Checkout-Funktionalitäten wäre, könnten wir hier eine Schaltfläche haben, die dieses Warenkorb-Array an eine Checkout-Seite sendet , und dann wäre der Benutzer in der Lage um diese Bestellung abzuschließen. Das schließt dieses kleine Klassenprojekt ab. Lassen Sie mich diesen Code einfach angeben, bevor ich es vergesse. Verwerfen Sie erneut den DS Store. Werfen wir einen kurzen Blick darauf, was wir hier geändert haben. Alles sieht gut aus. Wenn Sie Fehler bei irgendeinem davon feststellen, lassen Sie es mich einfach wissen. Kommentare unten, aber ich werde all diese inszenieren und dann das Projekt mit Mengeneingabe abschließen. Ich werde das noch einmal verwerfen. Das ist so ziemlich es Leute. Ich werde diesen Code auf GitHub für dich haben. Suchen Sie einfach auf meiner GitHub-Seite danach, die github.com/christopherdodd ist. Lass mich das loswerden. Überprüfe meine Repositorys und sieh nach, ob du es dort finden kannst. Irgendwelche Fragen. Lassen Sie sie in den Kommentaren unten. Ich hoffe, Ihnen hat diese praktische Anwendung der Verwendung von Web Components gefallen . Hoffentlich können Sie in dieser Klasse, wie wir anscheinend mit der Theorie begonnen haben und auf das Praktische eingegangen sind, wie wir anscheinend mit der Theorie begonnen haben und auf das Praktische eingegangen sind, damit beginnen, zu festigen, was Web Components tut und warum es wichtig ist. Ich sehe Sie im nächsten Video, in dem wir den Kurs abschließen werden, und ich werde mit Ihnen darüber sprechen, wie Sie dieses Klassenprojekt noch weiter erweitern können , wenn Sie möchten. Danke fürs Zuschauen, wir sehen uns im nächsten Video. 13. Abschließende Bemerkungen: Dies schließt unseren Kurs über Webkomponenten ab. Für Ihr Klassenprojekt ermutige ich Sie, Ihre eigene voll funktionsfähige Webkomponente zu erstellen . Zur Inspiration können Sie das, was wir bisher in dieser Klasse getan haben, mit dem E-Commerce-Beispiel nehmen bisher in dieser Klasse getan haben, mit und zusätzliche Funktionen wie Produktfilterung oder Varianzauswahl hinzufügen zusätzliche Funktionen wie . Wenn Sie Fragen oder Bedenken haben, hinterlassen Sie wie immer einen Kommentar im Diskussionsfeld unten und ich werde mein Bestes tun, um Sie in die richtige Richtung zu weisen. Danke wie immer fürs Zuschauen und ich hoffe, Sie auf einigen meiner anderen Kurse wiederzusehen.