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
---
assets/html/name-field.html | 14 +++
assets/html/exercise-card-component.html | 14 +++
assets/html/exercise-card-component.js | 19 ++++
assets/html/name-field.js | 22 +++++
index.html | 86 +++++++++++++++++++++
assets/html/hello-sayer-2.js | 19 ++++
assets/html/hello-sayer-2.html | 12 +++
7 files changed, 185 insertions(+), 1 deletions(-)
diff --git a/assets/html/exercise-card-component.html b/assets/html/exercise-card-component.html
new file mode 100644
index 0000000..2d69d29
--- /dev/null
+++ b/assets/html/exercise-card-component.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Card Component</title>
+ <script defer src="exercise-card-component.js"></script>
+ </head>
+ <body>
+ <card-component>
+ <span slot="title">Card Title</span>
+ <span slot="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat...</span>
+ </card-component>
+ </body>
+</html>
diff --git a/assets/html/exercise-card-component.js b/assets/html/exercise-card-component.js
new file mode 100644
index 0000000..376a66d
--- /dev/null
+++ b/assets/html/exercise-card-component.js
@@ -0,0 +1,19 @@
+class CardComponent extends HTMLElement {
+ constructor() {
+ super();
+
+ const shadowRoot = this.attachShadow({mode: "open"});
+
+ shadowRoot.innerHTML = `
+ <style>
+ :host {
+ color: white;
+ }
+ </style>
+ <div><h3><slot name="title"></slot></h3></div>
+ <div><slot name="content"></slot></div>
+ `;
+ }
+}
+
+window.customElements.define("card-component", CardComponent);
diff --git a/assets/html/hello-sayer-2.html b/assets/html/hello-sayer-2.html
new file mode 100644
index 0000000..6cc6ae7
--- /dev/null
+++ b/assets/html/hello-sayer-2.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Web Components</title>
+ <script defer src="hello-sayer-2.js"></script>
+ </head>
+ <body>
+ <hello-sayer>Joe</hello-sayer>
+ <hello-sayer>Allie</hello-sayer>
+ </body>
+</html>
diff --git a/assets/html/hello-sayer-2.js b/assets/html/hello-sayer-2.js
new file mode 100644
index 0000000..9111138
--- /dev/null
+++ b/assets/html/hello-sayer-2.js
@@ -0,0 +1,19 @@
+class HelloSayerComponent extends HTMLElement {
+ constructor() {
+ super();
+
+ this.root = this.attachShadow({mode: "open"});
+
+ this.root.innerHTML = `
+ <style>
+ span {
+ background-color: coral;
+ color: white;
+ }
+ </style>
+ <span>Hello <slot></slot>!</span>
+ `;
+ }
+}
+
+window.customElements.define("hello-sayer", HelloSayerComponent);
diff --git a/assets/html/name-field.html b/assets/html/name-field.html
new file mode 100644
index 0000000..966ec05
--- /dev/null
+++ b/assets/html/name-field.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title>Web Components</title>
+ <script defer src="name-field.js"></script>
+ </head>
+ <body>
+ <name-field>
+ <span slot="first">Leia</span>
+ <span slot="last">Organa</span>
+ </name-field>
+ </body>
+</html>
diff --git a/assets/html/name-field.js b/assets/html/name-field.js
new file mode 100644
index 0000000..281e055
--- /dev/null
+++ b/assets/html/name-field.js
@@ -0,0 +1,22 @@
+class NameFieldComponent extends HTMLElement {
+ constructor() {
+ super();
+
+ this.root = this.attachShadow({mode: "open"});
+
+ this.root.innerHTML = `
+ <style>
+ span {
+ background-color: coral;
+ color: white;
+ }
+ </style>
+ <span>
+ first name: <slot name="first"></slot> |
+ last name: <slot name="last"></slot>
+ </span>
+ `;
+ }
+}
+
+window.customElements.define("name-field", NameFieldComponent);
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><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><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><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