From d93ae0d6ced6bd7edc2722bda6d0354e4f1dee2d Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mo, 18 Mär 2024 16:20:20 +0100
Subject: [PATCH] add chapter for events in web components
---
index.html | 29 +++++++++++++++++++++++++++++
package.json | 2 +-
assets/images/web-components-event-bubbling-shadow-dom.png | 0
3 files changed, 30 insertions(+), 1 deletions(-)
diff --git a/assets/images/web-components-event-bubbling-shadow-dom.png b/assets/images/web-components-event-bubbling-shadow-dom.png
new file mode 100644
index 0000000..ff2b813
--- /dev/null
+++ b/assets/images/web-components-event-bubbling-shadow-dom.png
Binary files differ
diff --git a/index.html b/index.html
index c820332..4e7cb28 100644
--- a/index.html
+++ b/index.html
@@ -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 feurt, welches die Außenwelt über das gerade aktivierte Tab (tab-id) informiert</p>
+ </section>
</section>
</div>
</div>
diff --git a/package.json b/package.json
index c1830d3..332fc60 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
"license": "MIT",
"scripts": {
"test": "gulp test",
- "serve": "gulp serve --port 8001",
+ "serve": "gulp serve --port 8002",
"build": "gulp build"
},
"author": {
--
Gitblit v1.9.3