change order in agenda

Sascha Schulz

2024-06-10 e826970770516465c3f94486904bd66d6703242a

 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>
@@ -3749,6 +3749,7 @@
               </section>
               <section>
                  <h3>Styling einer Web Component</h3>
                  <p>Ein <code>:host</code>-Block mit einem <code>display</code> gehört zum guten Ton!</p>
                  <pre>
                     <code class="css" data-trim data-line-numbers>
                        <script type="text/template">
@@ -3763,6 +3764,160 @@
                     </code>
                  </pre>
               </section>
               <section>
                  <p>Innerhalb einer Komponente können beliebige Styles für verschiedene Selektoren verwendet werden</p>
                  <pre>
                     <code class="css" data-trim data-line-numbers>
                        <script type="text/template">
                           :host {
                              display: block;
                           }
									
                           .info {
                              background-color: lightblue;
                           }
									
                           .warning {
                              background-color: yellow;
                           }
                        </script>
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>Aufgabe</h3>
                  <p>Welche Wechselwirkungen haben Styles zueinander, die innerhalb und außerhalb einer Komponente definiert sind? (Vorlage "web-component-styles.html")</p>
               </section>
               <section>
                  <p>Einige globale Styles werden dennoch vererbt:</p>
                  <ul>
                     <li>Sämtliche Styles, die standardmäßig einen Wert von <code>inherit</code> besitzen (z.B. <code>color</code> oder <code>font-family</code>)</li>
                     <li>Eigene CSS-Variablen wie z.B. <code>--my-custom-color</code></li>
                  </ul>
               </section>
               <section>
                  <h3>Aufgabe</h3>
                  <p>Passe das vorherige Ergebnis (Vorlage "web-component-styles.html") so an, dass ein beliebiger Style per CSS-Variable von außen gesetzt werden kann (z.B. <code>color</code> oder <code>background-color</code>)</p>
                  <p>Erinnerung CSS-Variablen:</p>
                  <pre>
                     <code class="css" data-trim data-line-numbers>
                        /* Definition */
                        html {
                           --my-variable: #abcdef;
                        }
								
                        /* Usage */
                        .my-class {
                           background-color: var(--my-variable, white);
                        }
                     </code>
                  </pre>
               </section>
               <section>
                  <p>In der Anfangszeit von Web Components wurde oft folgendes Muster zur Individualisierung verwendet:</p>
                  <pre>
                     <code class="css" data-trim data-line-numbers>
                        /* Global Scope */
                        html {
                           --my-border-color: #abcdef;
                           --my-border-width: 1px;
                           --my-margin-top: 1rem;
                           --my-margin-bottom: 1rem;
                        }
								
                        /* Inside Web Component */
                        .container {
                           border-color: var(--my-border-color, white);
                           border-width: var(--my-border-width, 1px);
                           margin-top: var(--my-margin-top, 0.5rem);
                           margin-bottom: var(--my-margin-bottom, 0.5rem);
                        }
                     </code>
                  </pre>
               </section>
               <section>
                  <p>Eleganteres Stylen von Web Components mittels <code>part</code></p>
                  <pre>
                     <code class="css" data-trim data-line-numbers>
                        /* Global Scope */
                        my-component::part(inner) {
                           border-color: yellow;
                           border-width: 2px;
                        }
								
                        /* Inside Web Component */
                        <div part="inner"></div>
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>Aufgabe</h3>
                  <p>Passe die <code>CardComponent</code> aus einer vorherigen Übung an (Vorlage "card-component.html"), sodass man Titel und Inhalt einfach von außen per <code>part</code>s stylen kann.</p>
               </section>
               <section>
                  <p><code>part</code>s von eingebetteten Web Components exportieren und verfügbar machen</p>
                  <pre>
                     <code class="html" data-trim data-line-numbers>
                        <!-- Inner Component Html -->
                        <div part="inner">Inner Text</div>
								
                        <!-- Outer Component Html -->
                        <inner-component exportparts="inner"></inner-component>
								
                        <!-- Global Html -->
                        <outer-component></outer-component>
                     </code>
                  </pre>
               </section>
               <section>
                  <h3>Aufgabe</h3>
                  <p>Passe das Beispiel (Vorlage "exportparts.html") entsprechend an, sodass von außen sowohl der <code>Inner Text</code> als auch der <code>Outer Text</code> stylebar sind</p>
               </section>
               <section>
                  <h3>Stylen von LightDOM-Kindern</h3>
                  <p>Web Components können direkte Kinder, die via <code>slot</code> eingefügt werden, stylen. Hierfür gibt es den Pseudo-Elemente-Selektor <code>::slotted([selector])</code>, welcher Elemente selektiert, die in einem Slot stecken:</p>
                  <pre>
                     <code class="css" data-trim data-line-numbers>
                        /* Inside Web Component */
                        ::slotted(*) { /* Selectors like elements, #id or .class */
                           font-style: italic;
                        }
                     </code>
                  </pre>
               </section>
               <section>
                  <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>