Einführung in Web Components: Für flexible Web-Apps

Web Components sind für moderne Web-Apps ein absoluter Game Changer. Diese ermöglichen das erzeugen von eigenen HTML-Elementen, die flexibel eingesetzt werden können. Die HTML-Struktur wird dadurch übersichtlicher strukturiert und die Möglichkeit der Wiederverwendung verhindert Code Duplikationen.

Moderne SPA-Frameworks wie React, Vue oder Angular nutzen diese direkt unter der Haube. Daher ist es Sinnvoll zu verstehen, wie die Anatomie von Web Components aufgebaut ist. In diesem interaktiven Live-Stream, gibt euch der JavaScript-Experte Gregor Biswanger einen kompletten Einstieg in die Welt der Web Components.

Folge mir auf https://www.twitch.tv/gregorbiswanger
Komm zur Community auf https://discord.gg/rV67m6s

▼ ▼ ▼ Timestamps ▼ ▼ ▼

[00:00] Countdown
[02:07] Willkommen
[11:23] Einführung in Web Components
[16:32] Ein neues Projekt anlegen
[17:30] Der öffentliche Web Components Store
[20:30] Beispiel Web Componente einbinden
[24:44] Die Web Components Anatomie
[26:20] HTML Templates
[26:58] Vorhandene Template Engines
[27:37] Wichtige Template Eigenschaften
[28:28] Legacy-Way von HTML Templates
[45:15] Das Template Element
[54:20] Template Daten einfügen (Inject Data)
[57:35] Zugriff auf verschachtelte Templates (Nested Templates)
[1:02:40] Was haben wir bis jetzt gelernt?
[1:05:15] Custom Elements
[1:16:40] Lifecycle Hooks
[1:25:40] Reagieren auf geänderte Attribute-Werte
[1:30:10] Zwei Arten von Custom Elements
[1:31:00] Vorhandene Elemente erweitern (Extends)
[1:40:28] Eigene Attribute hinzufügen
[1:47:30] Eigene Events hinzufügen (Custom Events)
[1:59:00] Shadow DOM
[2:07:30] Shadow DOM erzeugen
[2:18:45] Platzhalter mit dem Slot-Element
[2:29:30] Zugriff auf das Slot-Element (assignedNodes)
[2:42:34] Shadow DOM Styling
[2:51:56] Externe CSS-Styles einbinden
[3:04:05] Eigene Web Componente coden
[3:22:55] Quiz
[3:39:15] Spielen mit der Community
[4:00:00] Abschied

✅ Mein Equipment: https://kit.co/GregorBiswanger/gregorsequip

Folge mir auf https://www.twitch.tv/gregorbiswanger
Komm zur Community auf https://discord.gg/rV67m6s

Видео Einführung in Web Components: Für flexible Web-Apps канала Gregor Biswanger