fix typo

Sascha Schulz

2024-06-03 a0bce2c2ad387b0153fd4398ae5aca9cc143f9e9

 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 feuert, welches die Außenwelt über das gerade aktivierte Tab (tab-id) informiert</p>
               </section>
            </section>
         </div>
      </div>