Benutzerhinweise:

- Nächste Folie: ▶
- Vorherige Folie: ◀










// Diese Präsentation ist auf 1080p ausgelegt

# WebComponents

> Agenda

  1. Einleitung
  2. Beispiele
  3. Diskussion


* Slides: marksweb.site/webcomponents
* GitHub: github.com/marktiedemann/webcomponents

# Einleitung

WebComponents ist der Überbegriff für eine Menge von standardisierten Web-Plattform-Features mit denen eigene HTML-Elemente gebaut werden können.

Die Elemente sind:
 - wiederverwendbar
 - gekapselt
 - erweiterbar

Zu den Features gehören u. a.:
 - Template Elements
 - Shadow DOM
 - Custom Elements

# Beispiele

1. <template>'s
2. Declarative Shadow DOM
3. <slot>'s
4. Lifecycle
5. Customized built-in Elements
6. Adopted Stylesheets
7. ::part()'s
8. Attributes
9. Form-associated Inputs

# Diskussion

Pro:
 - Unabhängig von Frameworks durch Nutzung von Web-Standards
 - Wiederverwendbar, gekapselt, erweiterbar

Pro & Contra:
 - Bruch der Style-Kaskade / Kontrolle über Kaskade
 - IntelliSense muss konfiguriert werden

Contra:
 - Teilweise komplexe APIs          -> Abhilfe durch WebComponent-Frameworks
 - Teilweise viel Boilerplate (z. B. Attribute)         wie stencil oder lit
 - Komplexeres Debugging

Veraltete Contra:
 - Schlecht für SEO
 - FOUC (Flash of unstyled content) -> gelöst durch Declarative Shadow DOM
 - Funktioniert nicht mit Forms
 - Keine Accessibility                -> gelöst durch ElementInternals

# Diskussion


Noch Fragen? Feedback? Hinweise?

exit;