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;