From 0ce1abf05619d2f2121157ebe03ec17b7fb6bdc4 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mo, 05 Feb 2024 12:59:03 +0100
Subject: [PATCH] add slots and introduction to styling

---
 index.html |   86 ++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 85 insertions(+), 1 deletions(-)

diff --git a/index.html b/index.html
index 1e3f795..ab3d7d5 100644
--- a/index.html
+++ b/index.html
@@ -3608,7 +3608,7 @@
 					<section>
 						<h3>Auf Attribute reagieren</h3>
 						<pre>
-							<code class=html data-trim data-line-numbers>
+							<code class="html" data-trim data-line-numbers>
 								<script type="text/template">
 									<hello-world my-attribute="a"></hello-world>
 								</script>
@@ -3679,6 +3679,90 @@
 					<section>
 						<iframe data-src="/assets/html/hello-sayer.html"></iframe>
 					</section>
+					<section>
+						<h3>Elemente aus dem LightDOM platzieren mit <code>&lt;slot></code></h3>
+						<pre>
+							<code class="js" data-trim data-line-numbers>
+								<script type="text/template">
+									this.root.innerHTML = `
+										<span>Hello <slot></slot>!</span>
+									`;
+								</script>
+							</code>
+						</pre>
+					</section>
+					<section>
+						<h4>Beispiel</h4>
+						<pre>
+							<code class="html" data-trim data-line-numbers>
+								<script type="text/template">
+									<hello-sayer>Joe</hello-sayer>
+									<hello-sayer>Allie</hello-sayer>
+								</script>
+							</code>
+						</pre>
+						<iframe data-src="/assets/html/hello-sayer-2.html"></iframe>
+					</section>
+					<section>
+						<h3>Mehrfache benannte <code>&lt;slot></code>s</h3>
+						<pre>
+							<code class=js data-trim data-line-numbers>
+								<script type="text/template">
+									this.root.innerHTML = `
+										<span>
+											first name: <slot name="first"></slot> |
+											last name: <slot name="last"></slot>
+										</span>
+									`;
+								</script>
+							</code>
+						</pre>
+					</section>
+					<section>
+						<h4>Beispiel</h4>
+						<pre>
+							<code class="html" data-trim data-line-numbers>
+								<script type="text/template">
+									<name-field>
+										<span slot="first">Leia</span>
+										<span slot="last">Organa</span>
+									</name-field>
+								</script>
+							</code>
+						</pre>
+						<iframe data-src="/assets/html/name-field.html"></iframe>
+					</section>
+					<section>
+						<h3>Aufgabe</h3>
+						<p>Entwerfe eine <code>CardComponent</code> (Vorlage "card-component.html") in folgendem Stil und nutze dabei sinnvolle <code>&lt;slot></code>s:</p>
+						<pre>
+							<code class="html" data-trim data-line-numbers>
+								<script type="text/template">
+									<card-component>
+										<span slot="title">This is a title</span>
+										<span slot="content">...Lorem ipsum dolor sit amet, consetetur sadipscing elitr...</span>
+									</card-component>
+								</script>
+							</code>
+						</pre>
+						<iframe data-src="/assets/html/exercise-card-component.html"></iframe>
+					</section>
+					<section>
+						<h3>Styling einer Web Component</h3>
+						<pre>
+							<code class="css" data-trim data-line-numbers>
+								<script type="text/template">
+									:host {
+										display: block; /* inline, inline-block, flex, grid etc... */
+									
+										color: red;
+									
+										font-family: Arial, Helvetica, sans-serif;
+									}
+								</script>
+							</code>
+						</pre>
+					</section>
 				</section>
 			</div>
 		</div>

--
Gitblit v1.9.3