add solution for tab component event exercise

Sascha Schulz

2024-06-10 1838ab5ce4d049d6c113124b1969dfebc90b4163

add solution for tab component event exercise

 index.html

@@ -3918,6 +3918,55 @@
                        <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>