public/web-development/presentation.git

			@@ -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,209 @@
			</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>
			<h3>Lösung</h3>
			<pre>
			<code class="js" data-trim data-line-numbers>
			this.root.innerHTML = `
			<style>
			::slotted(div) {
			display: none;
			}

			::slotted(div.active) {
			display: block;
			}
			</style>

			<div><slot name="tab"></slot></div>
			<div><slot name="content"></slot></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>