From f67632bb3cd2ea7bee7cc5e3ca342140455495ab Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mi, 10 Apr 2024 12:00:13 +0200
Subject: [PATCH] Merge branch 'draft'
---
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 | 246 +++++++++++++++++++++++++++++++++++++++++
assets/html/hello-sayer-2.js | 19 +++
package.json | 2
assets/images/web-components-event-bubbling-shadow-dom.png | 0
assets/html/hello-sayer-2.html | 12 ++
9 files changed, 347 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/assets/images/web-components-event-bubbling-shadow-dom.png b/assets/images/web-components-event-bubbling-shadow-dom.png
new file mode 100644
index 0000000..ff2b813
--- /dev/null
+++ b/assets/images/web-components-event-bubbling-shadow-dom.png
Binary files differ
diff --git a/index.html b/index.html
index 0aacea8..4e7cb28 100644
--- a/index.html
+++ b/index.html
@@ -3608,6 +3608,13 @@
<section>
<h3>Auf Attribute reagieren</h3>
<pre>
+ <code class="html" data-trim data-line-numbers>
+ <script type="text/template">
+ <hello-world my-attribute="a"></hello-world>
+ </script>
+ </code>
+ </pre>
+ <pre>
<code class="js" data-trim data-line-numbers="2|8-10">
<script type="text/template">
class HelloWorldComponent extends HTMLElement {
@@ -3672,6 +3679,245 @@
<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>
+ <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">
+ :host {
+ display: block; /* inline, inline-block, flex, grid etc... */
+
+ color: red;
+
+ font-family: Arial, Helvetica, sans-serif;
+ }
+ </script>
+ </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 feurt, welches die Außenwelt über das gerade aktivierte Tab (tab-id) informiert</p>
+ </section>
</section>
</div>
</div>
diff --git a/package.json b/package.json
index c1830d3..332fc60 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
"license": "MIT",
"scripts": {
"test": "gulp test",
- "serve": "gulp serve --port 8001",
+ "serve": "gulp serve --port 8002",
"build": "gulp build"
},
"author": {
--
Gitblit v1.9.3