add solution for tab component event exercise

Sascha Schulz

2024-06-10 1838ab5ce4d049d6c113124b1969dfebc90b4163

 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,84 @@
                  <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>
                  <h3>Lösung</h3>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        this.root.innerHTML = `
                           &lt;style>
                              ::slotted(div) {
                                 display: none;
                              }
						
                              ::slotted(div.active) {
                                 display: block;
                              }
                           &lt;/style>
									
                           &lt;div>&lt;slot name="tab">&lt;/slot>&lt;/div>
                           &lt;div>&lt;slot name="content">&lt;/slot>&lt;/div>
                        `;
                     </code>
                  </pre>
               </section>
               <section>
                  <pre>
                     <code class="js" data-trim data-line-numbers>
                        connectedCallback() {
                           const firstContent = this.querySelector("div");
							
                           firstContent.classList.add("active");
							
                           this.addEventListener("click", (e) => {
                              if (e.target.tagName === "SPAN" && e.target.hasAttribute("tab-id")) {
                                 const oldContent = this.querySelector("div.active");
                                 const newContent = this.querySelector(`[tab-id="${e.target.getAttribute("tab-id")}"]`);
							
                                 oldContent.classList.remove("active");
                                 newContent.classList.add("active");
							
                                 this.dispatchEvent(new CustomEvent("tabclick", {composed: true, bubbles: true, detail: e.target.getAttribute("tab-id"), cancelable: true}));
                              }
                           });
                        }
                     </code>
                  </pre>
               </section>
            </section>
            <section>
               <section>
					
               </section>
            </section>
         </div>
      </div>