From e826970770516465c3f94486904bd66d6703242a Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mo, 10 Jun 2024 12:20:29 +0200
Subject: [PATCH] change order in agenda
---
index.html | 45 +++++++++++++++++++++++++++++++++++++--------
1 files changed, 37 insertions(+), 8 deletions(-)
diff --git a/index.html b/index.html
index c820332..9c88b13 100644
--- a/index.html
+++ b/index.html
@@ -36,9 +36,16 @@
<ul>
<li>JavaScript</li>
<li>Responsive Design</li>
- <li>NodeJS</li>
<li>WebComponents / lit</li>
+ <li>NodeJS</li>
<li>Datenbank</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Betrieb</h3>
+ <ul>
+ <li>Server einrichten</li>
+ <li>SSL- / TLS-Zertifikate</li>
</ul>
</section>
<section>
@@ -66,13 +73,6 @@
<li>Progressive Web Application</li>
<li>CEF / Electron</li>
<li>WebAssembly</li>
- </ul>
- </section>
- <section>
- <h3>Betrieb</h3>
- <ul>
- <li>Server einrichten</li>
- <li>SSL- / TLS-Zertifikate</li>
</ul>
</section>
<section>
@@ -3889,6 +3889,35 @@
<h3>Aufgabe</h3>
<p>Definiere mit dem Pseudo-Elemente-Selektor <code>::slotted()</code> Styles, sodass per <code>slot</code> eingefügte Elemente mit der Klasse <code>red</code> einen roten und Elemente mit der Klasse <code>blue</code> einen blauen Hintergrund haben. Die Schriftart soll jeweils weiß sein (Vorlage "slotted.html")</p>
</section>
+ <section>
+ <h3>Events in Web Components</h3>
+ <img data-src="/assets/images/web-components-event-bubbling-shadow-dom.png">
+ <ul>
+ <li>Events können an einer Web Component selbst oder innerhalb des Shadow Dom <code>dispatcht</code> werden</li>
+ <li>Das Shadow Root der Komponente stellt eine Art "gläserne Decke" dar</li>
+ <li>Standard-Events der UI wie <code>click</code> bubbeln durch das Shadow Dom nach oben durch</li>
+ <li>Ein <code>CustomEvent</code> muss entsprechend konfiguriert werden</li>
+ </ul>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ button.dispatchEvent(new CustomEvent(
+ "tabactivated", // Name des Events, frei wählbar
+ {
+ detail: "any data", // beliebige Daten wie Strings, Zahlen, Booleans usw.
+ bubbles: true, // bestimmt, ob das Event durch alle Eltern nach oben steigt
+ cancelable: true, // Abbrechbar per event.preventDefault()
+ composed: true // durch eventuelle Shadow Root steigen, falls vorhanden.
+ }
+ ));
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ <p>Entwickle eine Tab-Komponente (Vorlage "tab-componenmt.html"), welche beim Click auf einen Registerreite / Tab ein Event feuert, welches die Außenwelt über das gerade aktivierte Tab (tab-id) informiert</p>
+ </section>
</section>
</div>
</div>
--
Gitblit v1.9.3