| 2024-01-15 | Sascha Schulz |  |
| 2024-01-15 | Sascha Schulz |  |
| 2024-01-15 | Sascha Schulz | |
| assets/html/hello-sayer.html | ●●●●● Patch | Ansicht | Raw | Blame | Historie | |
| assets/html/hello-sayer.js | ●●●●● Patch | Ansicht | Raw | Blame | Historie | |
| assets/html/hello-world.html | ●●●●● Patch | Ansicht | Raw | Blame | Historie | |
| assets/html/hello-world.js | ●●●●● Patch | Ansicht | Raw | Blame | Historie | |
| assets/images/web-components-angular.png | Patch | Ansicht | Raw | Blame | Historie | |
| assets/images/web-components-shadow-root.png | Patch | Ansicht | Raw | Blame | Historie | |
| assets/images/web-components.svg | ●●●●● Patch | Ansicht | Raw | Blame | Historie | |
| index.html | ●●●●● Patch | Ansicht | Raw | Blame | Historie |
assets/html/hello-sayer.html
Neue Datei @@ -0,0 +1,11 @@ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Web Components</title> <script defer src="hello-sayer.js"></script> </head> <body> <hello-sayer></hello-sayer> </body> </html> assets/html/hello-sayer.js
Neue Datei @@ -0,0 +1,30 @@ class HelloSayerComponent extends HTMLElement { static observedAttributes = ["name"]; constructor() { super(); this.root = this.attachShadow({mode: "open"}); this.root.innerHTML = ` <style> div { background-color: coral; color: white; } </style> <div>Hello!</div> `; } attributeChangedCallback(name, oldValue, newValue) { this.root.querySelector("div").innerHTML = `Hello ${newValue}!`; } } window.customElements.define("hello-sayer", HelloSayerComponent); const names = ["Joe", "Allie"]; let counter = 0; setInterval(() => document.querySelector("hello-sayer").setAttribute("name", names[counter++ % 2]), 2000); assets/html/hello-world.html
Neue Datei @@ -0,0 +1,11 @@ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World!</title> <script defer src="hello-world.js"></script> </head> <body> <hello-world></hello-world> </body> </html> assets/html/hello-world.js
Neue Datei @@ -0,0 +1,21 @@ class HelloWorldComponent extends HTMLElement { constructor() { super(); } connectedCallback() { const shadowRoot = this.attachShadow({mode: "open"}); shadowRoot.innerHTML = ` <style> div { background-color: coral; color: white; } </style> <div>Hello World!</div> `; } } window.customElements.define("hello-world", HelloWorldComponent); assets/images/web-components-angular.png
Neue Datei @@ -0,0 +1,4 @@ <?xml version="1.0" encoding="UTF-8"?> <!-- Do not edit this file with editors other than diagrams.net --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="741px" height="341px" viewBox="-0.5 -0.5 741 341" content="<mxfile host="Electron" modified="2024-01-15T11:54:45.513Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="zBYVRExFlNvNc3VbmwMa" version="16.1.2" type="device"><diagram id="_mN-1l_V98IZA5mOcHRj" name="Page-1">zZfLUtswFIafJstkZMk3LWkS2tJhYMYLyKqj2CL21LY8soITnr4ylnxTgEIJySo6v67nO7+teILm2e47J0V8zSKaTiCIdhO0mEAIsQ3lT63sG8WCwG6UDU8ipXVCkDxRJQKlbpOIloOBgrFUJMVQDFme01AMNMI5q4bDHlg63LUgG2oIQUhSU71LIhE3qg+9Tv9Bk02sd7Zc3PRkRA9WmZQxiVjVk9ByguacMdG0st2cpjU9zaWZd/lCb3swTnPxLxPWaAWny5X1VN1cTte/8G9UXE1VeR5JulUJ39G1FOYsK1guVy7V4cVeE5GrSvgy+FbFiaBBQcK6p5IGkFosslRGlmyWgrM/LbVaeWC5UCWGWMZqc8oF3b2YldWyki6jLKOC7+UQbTGg8FZddWytxf3K6DoQ5YhNu1YHTTYUt3cwRAbDeRBIIaCpdCTj/4FwDMxE+gkIbQVGP6KuSbQd0yfqHwuoawC9qnle3P48c5IOPDeUnoEyaF5DECxurs8cZ4tlP0J3Mpy+gdNEmEcX9b0jozAlZZmEQ3KcbfOI1puAAxzpLhH3qq9ur9Ssur3Y9ToWex3kMrF7PawOVv2ebtJzpGc1x6aRcfmNaiNTY1se0revEEH4hoq3XpNmrXu1dA6UUmucpkQkj8PjHqqv2uGWJTKR7h03ejLR+DZo0lSz+rfoaCHkjB5xDw4XajgYCz3brU374w7EX+bAmfN+D6pJZ+xC75QuRBjNPOi7NvJc6GLgDa1k4RnGrg1c35Nt6KEPWtQHMwCgbyHPloFju8NtfDyDviPP4TnQQT76WgPrP/bHd7D1Af+euXvdU7rXAa+6F36Oe238unvxkdwrw+5brBnefdKi5V8=</diagram></mxfile>" style="background-color: rgb(42, 42, 42);"><defs/><g><ellipse cx="370" cy="70" rx="200" ry="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 398px; height: 1px; padding-top: 70px; margin-left: 171px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 29px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Web Components</div></div></div></foreignObject><text x="370" y="79" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="29px" text-anchor="middle">Web Components</text></switch></g><ellipse cx="130" cy="210" rx="120" ry="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 238px; height: 1px; padding-top: 210px; margin-left: 11px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 29px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">CSS Selectors</div></div></div></foreignObject><text x="130" y="219" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="29px" text-anchor="middle">CSS Selectors</text></switch></g><ellipse cx="610" cy="210" rx="120" ry="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 238px; height: 1px; padding-top: 210px; margin-left: 491px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 29px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">JS API</div></div></div></foreignObject><text x="610" y="219" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="29px" text-anchor="middle">JS API</text></switch></g><ellipse cx="370" cy="290" rx="120" ry="40" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 238px; height: 1px; padding-top: 290px; margin-left: 251px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 29px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Shadow DOM</div></div></div></foreignObject><text x="370" y="299" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="29px" text-anchor="middle">Shadow DOM</text></switch></g><path d="M 228.58 112.43 L 216.09 175.47" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 215.07 180.62 L 213 173.07 L 216.09 175.47 L 219.86 174.43 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><path d="M 370 130 L 370 243.63" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 370 248.88 L 366.5 241.88 L 370 243.63 L 373.5 241.88 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/><path d="M 511.42 112.43 L 523.91 175.47" fill="none" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 524.93 180.62 L 520.14 174.43 L 523.91 175.47 L 527 173.07 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-miterlimit="10" pointer-events="all"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg> index.html
@@ -3451,6 +3451,228 @@ <p>Implementiere einen drehenden Würfel (Vorlage "templates/008-css/css-3d-cube.html")</p> </section> </section> <section> <section> <h2>Web Components</h2> </section> <section> <p>Was sind Web Components?</p> <img data-src="/assets/images/web-components.svg"> </section> <section> <p>Vorteile</p> <ul> <li>Entwicklung eigener HTML-Elemente, welche sich nahtlos neben nativen Elementen nutzen lassen</li> <li>Hohe Wiederverwendbarkeit in mehreren Projekten</li> <li>Keine Libraries oder Frameworks notwendig, um eigene Elemente zu entwickeln</li> <li>Kapselung des Scopes sowohl von JS (Variablen...) als auch CSS (id, class...)</li> </ul> </section> <section> <h3>Ansätze in der Vergangenheit und Alternativen heute</h3> </section> <section> <h4>jQuery</h4> <a href="https://api.jqueryui.com/accordion/#entry-examples" target="_blank">https://api.jqueryui.com/accordion/#entry-examples</a> </section> <section> <pre> <code class="html" data-trim data-line-numbers> <script type="text/template"> <div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist"> <h3 class="ui-accordion-header ui-corner-top ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="true" aria-expanded="true" tabindex="0"> <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>Section 1</h3> <div class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content ui-accordion-content-active" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false" style="display: block; height: 166.8px;"> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio.</p> </div> <h3 class="ui-accordion-header ui-corner-top ui-state-default ui-accordion-icons ui-accordion-header-collapsed ui-corner-all" role="tab" id="ui-id-3" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Section 2</h3> <div class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-4" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true" style="display: none; height: 166.8px;"> <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit, faucibus interdum tellus libero ac justo.</p> </div> <h3 class="ui-accordion-header ui-corner-top ui-state-default ui-accordion-icons ui-accordion-header-collapsed ui-corner-all" role="tab" id="ui-id-5" aria-controls="ui-id-6" aria-selected="false" aria-expanded="false" tabindex="-1"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Section 3</h3> <div class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-6" aria-labelledby="ui-id-5" role="tabpanel" aria-hidden="true" style="display: none; height: 166.8px;"> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.Phasellus pellentesque purus in massa.</p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> </div> </script> </code> </pre> </section> <section> <h4>angular</h4> <img data-src="/assets/images/web-components-angular.png"> </section> <section> <pre> <code class="html" data-trim data-line-numbers> <script type="text/template"> <app-root _nghost-ng-c3715250071="" ng-version="17.0.0"><app-top-bar _ngcontent-ng-c3715250071="" _nghost-ng-c3918259376=""><a _ngcontent-ng-c3918259376="" routerlink="/" ng-reflect-router-link="/" href="/"><h1 _ngcontent-ng-c3918259376="">My Store</h1></a><a _ngcontent-ng-c3918259376="" routerlink="/cart" class="button fancy-button" ng-reflect-router-link="/cart" href="/cart"><em _ngcontent-ng-c3918259376="" class="material-icons">shopping_cart</em>Checkout </a></app-top-bar><div _ngcontent-ng-c3715250071="" class="container"><router-outlet _ngcontent-ng-c3715250071=""></router-outlet><app-product-list _nghost-ng-c2837874410=""><h2 _ngcontent-ng-c2837874410="">Products</h2><div _ngcontent-ng-c2837874410=""><h3 _ngcontent-ng-c2837874410=""><a _ngcontent-ng-c2837874410="" title="Phone XL details" ng-reflect-router-link="/products,1" href="/products/1"> Phone XL </a></h3><p _ngcontent-ng-c2837874410=""> Description: A large phone with one of the best screens </p><!--bindings={ "ng-reflect-ng-if": "A large phone with one of the " }--><button _ngcontent-ng-c2837874410="" type="button"> Share </button><app-product-alerts _ngcontent-ng-c2837874410="" _nghost-ng-c869072018="" ng-reflect-product="[object Object]"><p _ngcontent-ng-c869072018=""><button _ngcontent-ng-c869072018="" type="button">Notify Me</button></p><!--bindings={ "ng-reflect-ng-if": "true" }--></app-product-alerts></div><div _ngcontent-ng-c2837874410=""><h3 _ngcontent-ng-c2837874410=""><a _ngcontent-ng-c2837874410="" title="Phone Mini details" ng-reflect-router-link="/products,2" href="/products/2"> Phone Mini </a></h3><p _ngcontent-ng-c2837874410=""> Description: A great phone with one of the best cameras </p><!--bindings={ "ng-reflect-ng-if": "A great phone with one of the " }--><button _ngcontent-ng-c2837874410="" type="button"> Share </button><app-product-alerts _ngcontent-ng-c2837874410="" _nghost-ng-c869072018="" ng-reflect-product="[object Object]"><!--bindings={ "ng-reflect-ng-if": "false" }--></app-product-alerts></div><div _ngcontent-ng-c2837874410=""><h3 _ngcontent-ng-c2837874410=""><a _ngcontent-ng-c2837874410="" title="Phone Standard details" ng-reflect-router-link="/products,3" href="/products/3"> Phone Standard </a></h3><!--bindings={ "ng-reflect-ng-if": "" }--><button _ngcontent-ng-c2837874410="" type="button"> Share </button><app-product-alerts _ngcontent-ng-c2837874410="" _nghost-ng-c869072018="" ng-reflect-product="[object Object]"><!--bindings={ "ng-reflect-ng-if": "false" }--></app-product-alerts></div><!--bindings={ "ng-reflect-ng-for-of": "[object Object],[object Object" }--></app-product-list><!--container--></div> </app-root> </script> </code> </pre> </section> <section> <h3>Aufbau einer Web Component</h3> <pre> <code class="html" data-trim data-line-numbers> <script type="text/template"> <!-- Hinweis: Der Name bzw. der Selektor muss immer einen Bindestrich enthalten, damit keine Namens-Kollisionen mit nativen HTML-Tags entstehen können --> <hello-world></hello-world> </script> </code> </pre> </section> <section> <pre> <code class="js" data-trim data-line-numbers="1-16|19"> <script type="text/template"> class HelloWorldComponent extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: "open"}); shadowRoot.innerHTML = ` <style> div { background-color: coral; color: white; } </style> <div>Hello World!</div> `; } } window.customElements.define("hello-world", HelloWorldComponent); </script> </code> </pre> </section> <section> <iframe data-src="/assets/html/hello-world.html"></iframe> </section> <section> <h4>Light DOM vs Shadow DOM</h4> <img data-src="/assets/images/web-components-shadow-root.png" width="500px"> </section> <section> <h4>Suche von Elementen im Light- und Shadow DOM</h4> <pre> <code class="js" data-trim data-line-numbers> <script type="text/template"> // Light DOM const span = document.querySelector("span"); // Hi! const divs = document.querySelectorAll("div"); console.log(divs.length); // => 1 // Shadow DOM const helloWorld = document.querySelector("hello-world"); helloWorld.shadowRoot.querySelector("div"); // Hello World! </script> </code> </pre> </section> <section> <h3>Auf Attribute reagieren</h3> <pre> <code class="js" data-trim data-line-numbers="2|8-10"> <script type="text/template"> class HelloWorldComponent extends HTMLElement { static observedAttributes = ["my-attribute"]; constructor() { // ... } attributeChangedCallback(name, oldValue, newValue) { console.log(`${name}: changed from ${oldValue} to ${newValue}`); } } </script> </code> </pre> </section> <section> <h3>Aufgabe</h3> <p>Lasse die eigene Komponente "hello-sayer" auf eine Änderung des "name"-Attributs reagieren, indem der dort eingetragene Name in der Komponente angezeigt wird (Beispiel: name="Joe" => Hello Joe!)</p> <p>(/examples/templates/web-components/hello-sayer.html)</p> </section> <section> <h3>Musterlösung</h3> <pre> <code class="js" data-trim data-line-numbers> <script type="text/template"> class HelloSayerComponent extends HTMLElement { static observedAttributes = ["name"]; constructor() { super(); this.root = this.attachShadow({mode: "open"}); this.root.innerHTML = ` <style> div { background-color: coral; color: white; } </style> <div>Hello!</div> `; } attributeChangedCallback(name, oldValue, newValue) { this.root.querySelector("div").innerHTML = `Hello ${newValue}!`; } } window.customElements.define("hello-sayer", HelloSayerComponent); const names = ["Joe", "Allie"]; let counter = 0; setInterval(() => document.querySelector("hello-sayer").setAttribute("name", names[counter++ % 2]), 2000); </script> </code> </pre> </section> <section> <iframe data-src="/assets/html/hello-sayer.html"></iframe> </section> </section> </div> </div>
