Bestandteile
HTML
CSS
vermutlich
JavaScript
möglicherweise
Optimiere das Aussehen
Optimiere die UX
Mach es Funktional
Slide 9
Slide 9 text
Web-Components
Slide 10
Slide 10 text
Web-Components
•Erlauben das Definieren von eigenen HTML Elementen
•Set von Web APIs
•Custom Elements
•Shadow DOM
•HTML Template
•ES Modules (wird im Vortrag nicht behandelt)
https://www.webcomponents.org/introduction
Slide 11
Slide 11 text
Custom Elements
Slide 12
Slide 12 text
Autonomous Custom Element
Achtung
Etwas schlimmes ist passiert!
class MyAlert extends HTMLElement {
…
}
customElements.define('my-alert', MyAlert);
Slide 13
Slide 13 text
13
Kennen wir das nicht woher?
https://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml
Slide 14
Slide 14 text
Customized Built-In Element
Some Link
class EmbeddableContent
extends HTMLAnchorElement {
…
}
customElements.define(‘embeddable-content',
EmbeddableContent, {extends: ‘a'});
Slide 15
Slide 15 text
Custom Element API
•constructor()
// instance is created
•connectedCallback()
// instance is inserted into DOM
•disconnectedCallback()
// instance is removed from DOM
•attributeChangedCallback(attrName, oldVal, newVal)
// one of observed attributes changed -> static get observedAttributes()
•adoptedCallback()
// instance is adopted via document.adoptNode(el)