From acac3fb9f6581d444dce2868dd401bbe7ed6fd45 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mo, 15 Jan 2024 18:26:51 +0100
Subject: [PATCH] Merge branch 'draft'
---
index.html | 222 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 222 insertions(+), 0 deletions(-)
diff --git a/index.html b/index.html
index 085d3f5..0aacea8 100644
--- a/index.html
+++ b/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>
--
Gitblit v1.9.3