In diesem Seminar lernen Sie an Hand zahlreicher praxisorientierter Beispiele alle nötigen Techniken, um künftig eigene Web Komponenten in der Praxis einsetzen zu können.
Built-in-Events (MouseEvent, KeyboardEvent und andere)
Custom Events, eigene Events erstellen
Eigene Events triggern/auslösen
Dispatching custom events
Module in ECMAScript 6 im- und exportieren
import, export, default
Templates
Feature-Erkennung
Template anlegen
Template einbinden
verschachtelte Templates
Polyfills
Shadow DOM
Funktionsweise des Shadow DOM
Encapsulation / Kapselung
Shadow-Host und Shadow-Root
ShadowDOM erstellen
Unterschied zwischen open - und closed -Mode
Shadow Tree
Verwendung
Anlegen und Einbinden eines Templates
Slots und Named Slots
CSS-Formatierung des Shadow DOM
Weblinks
Custom Elements
Logik und Verhalten der Komponente mit JavaScript steuern
Regeln für die Namensvergabe eigener Webcomponents
neue Elemente erstellen
Bestehende Elemente erweitern / Customized built-in elements
Observing attributes
Eventhandling innerhalb von Custom Elements
Lifecycle Hooks
Ressources, Tools, etc
Inspizieren der Webkomponente in den Developer Tools
Online-Ressourcen zu Repositories frei verfügbarer Komponenten
Open Web Components
Bibliotheken
Überblick über die wichtigsten Bibliotheken und Helper-Libraries
LitElements
Polymer Project
Libraries, tools, and standards for a better web: LitElement, lit-html, web components...
Stencil
Slim.js
SkateJS
Dauer/zeitlicher Ablauf:
3 Tage
Zielgruppe:
Programmierer, Web Developer oder Web App Entwickler, die ihre webbasierten Anwendungen mit nativen Techniken entwickeln und in wiederverwendbare Komponenten splitten wollen, um dadurch unabhängig von komplexen Frameworks wie Angular, Vue.js oder React o.ä. zu sein.
HTML- CSS- und JavaScript-Kenntnisse werden vorausgesetzt.
Wir setzen Analyse-Cookies ein, um Ihre Zufriedenheit bei der Nutzung unserer Webseite zu verbessern.
Diese Cookies werden nicht automatisiert gesetzt.
Wenn Sie mit dem Einsatz dieser Cookies einverstanden sind, klicken Sie bitte auf Akzeptieren.
Weitere Informationen finden Sie hier.
