| | |
|---|
| | | <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="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 { |
|---|
| | | 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> |
|---|
| | | <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 feuert, welches die Außenwelt über das gerade aktivierte Tab (tab-id) informiert</p> |
|---|
| | | </section> |
|---|
| | | </section> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
