add chapter for events in web components

Sascha Schulz

2024-03-18 d93ae0d6ced6bd7edc2722bda6d0354e4f1dee2d

add chapter for events in web components

 assets/images/web-components-event-bubbling-shadow-dom.png

 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>

 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": {