Entwicklung von Webkomponenten

Seminarziel

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.

Inhalt

• Web Components
• JavaScript
  • Variablen erstellen mit var, let, const
  • Gültigkeitsbereiche / Scopes
  • Template-Strings
  • Funktionen und Klassen
    • Vererbung
    • Getter und Setter
    • statische Methodenaufrufe
    • private Methoden
• Eventhandling
  • Das Eventobjekt
  • 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