| assets/html/exercise-card-component.html | ●●●●● Patch | Ansicht | Raw | Blame | Historie | |
| assets/html/exercise-card-component.js | ●●●●● Patch | Ansicht | Raw | Blame | Historie | |
| assets/html/hello-sayer-2.html | ●●●●● Patch | Ansicht | Raw | Blame | Historie | |
| assets/html/hello-sayer-2.js | ●●●●● Patch | Ansicht | Raw | Blame | Historie | |
| assets/html/name-field.html | ●●●●● Patch | Ansicht | Raw | Blame | Historie | |
| assets/html/name-field.js | ●●●●● Patch | Ansicht | Raw | Blame | Historie | |
| index.html | ●●●●● Patch | Ansicht | Raw | Blame | Historie |
assets/html/exercise-card-component.html
Neue Datei @@ -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> assets/html/exercise-card-component.js
Neue Datei @@ -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); assets/html/hello-sayer-2.html
Neue Datei @@ -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> assets/html/hello-sayer-2.js
Neue Datei @@ -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); assets/html/name-field.html
Neue Datei @@ -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> assets/html/name-field.js
Neue Datei @@ -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); 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>
