Web Development Presentation
2 Dateien geändert
7 Dateien hinzugefügt
348 ■■■■■ Geänderte Dateien
assets/html/exercise-card-component.html 14 ●●●●● Patch | Ansicht | Raw | Blame | Historie
assets/html/exercise-card-component.js 19 ●●●●● Patch | Ansicht | Raw | Blame | Historie
assets/html/hello-sayer-2.html 12 ●●●●● Patch | Ansicht | Raw | Blame | Historie
assets/html/hello-sayer-2.js 19 ●●●●● Patch | Ansicht | Raw | Blame | Historie
assets/html/name-field.html 14 ●●●●● Patch | Ansicht | Raw | Blame | Historie
assets/html/name-field.js 22 ●●●●● Patch | Ansicht | Raw | Blame | Historie
assets/images/web-components-event-bubbling-shadow-dom.png Patch | Ansicht | Raw | Blame | Historie
index.html 246 ●●●●● Patch | Ansicht | Raw | Blame | Historie
package.json 2 ●●●●● 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);





 assets/images/web-components-event-bubbling-shadow-dom.png




 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>&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>


                        <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>




 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": {