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>
@@ -3916,7 +3916,56 @@
               </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>
                  <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>