Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Write-once-use-anywhere-web-components-md-dev-d...

Avatar for Sascha Lehmann Sascha Lehmann
May 14, 2025
9

 Write-once-use-anywhere-web-components-md-dev-days.pdf

Frameworks und UI-Libraries gibt es viele – doch kaum eine ist wirklich universell einsetzbar und anpassbar. Mit Web Components schaffen Sie die Basis für Design Systems, die flexibel, plattformübergreifend und zukunftssicher sind. Dank moderner Browser-Schnittstellen wie der Popover- oder Anker-Positioning-API wird die Entwicklung einfacher als je zuvor. Sascha Lehmann zeigt in dieser Session, wie Sie mit Lit leistungsstarke Web Components bauen, typische Fallstricke vermeiden und APIs für maximale Kompatibilität gestalten.

Avatar for Sascha Lehmann

Sascha Lehmann

May 14, 2025
Tweet

More Decks by Sascha Lehmann

Transcript

  1. Write once, use anywhere Framework agnostische Design Systems mit Web

    Components Sascha Lehmann @derLehmann_S Consultant
  2. Wo ist das Problem? Write once, use anywhere Framework agnostische

    Design Systems auf Basis von Web Components
  3. DEV Team Produkt / POC Write once, use anywhere Framework

    agnostische Design Systems auf Basis von Web Components
  4. DEV Team Produkt UX Team Write once, use anywhere Framework

    agnostische Design Systems auf Basis von Web Components
  5. • Gilt eine frirmenweite Regelung mit welchem Framework gearbeitet wird,

    oder kann jedes Team nach Entwicklerzusammensetung/-erfahrung frei entscheiden? • Gibt es externe Dienstleister oder Argenturen die mit im Boot sind? • Gibt es CMS Systeme die auch versorgt werden müssen? • Etc. Welche Fragen gilt es zu stellen? Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
  6. • Eine Sammlung von Erfahrungen (Do’s and Don’ts) • Pattern

    & Component Library • Styleguide (Die Gurndlage des Designprozesses) • Design Language Was ist ein Design System Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
  7. • Visuelle Konsistenz in einer (oder mehreren) Anwendung(en) • Einheitliche

    Basis für Product Owner, Marketing und Entwicklung • Erzeugt ein Interface zwischen Design & Entwicklung • Schnellere Implementierung neuer Features Was sind die Ziele? Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
  8. Welche Design Systems gibt es? Write once, use anywhere Framework

    agnostische Design Systems auf Basis von Web Components
  9. Building Blocks eines Design Systems Tokens md.sys.color.primary md.sys.color.on-primary md.sys.typescale.display-l md.sys.typescale.display-s

    Typography Display Headline Title Body Colors Primary Secondary Tertiary Background Elevations 0dp 1dp 2dp 3dp States enabled disabled Layout Gaps Margins Paddings Border-Radius Motion Design Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
  10. … aber basierend auf Web Standards Kein eigener Web-Standard… Custom

    Elements ES Modules Shadow DOM HTML Templates Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
  11. So werden sie definiert Custom Elements Write once, use anywhere

    Framework agnostische Design Systems auf Basis von Web Components
  12. document node node node Shadow Host Shadow DOM Shadow Root

    node node node Shadow DOM Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
  13. Input Element Ein naiver erster Wurf … Verwendung Write once,

    use anywhere Framework agnostische Design Systems auf Basis von Web Components
  14. Vorteile Ein naiver erster Wurf … • Properties können „straight

    forward“ übrgeben werden • Styling ist vollständig durch Shadow-DOM gekapselt • Einfache Verwendung der Komponente Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
  15. Nachteile Ein naiver erster Wurf … • Wir ”verstecken” bzw.

    kapseln alles in der Komponente • Soll die komponente später erweitert werden wächst auch die Anzahl der „Input-Parameter“ → Input-Hell • Bei Elementen die im Formular-Kontext verwendet werden sollen → Frameworks und native Forms erkennen die Komponente nicht automatisch als Formular-Element Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
  16. Nutze die Power von Slotting / Contentprojection Ein zweiter Anlauf

    … Verwendung Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
  17. Vorteile Ein zweiter Anlauf … • Die ”nativen” HTML Elemente

    bleiben im Light-DOM ✓ Default Verhalten bleibt erhalten ✓ Barrerefreiheit kann gewärleistet werden ✓ Keine Wrapper für Frameworks nötig • Höhere Flexibilität der Komponente ✓ Keine ”Input-Hell” ✓ Einfachere Erweiterbarkeit ✓ Komponente gibt die Struktur vor Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
  18. Nachteile Ein zweiter Anlauf … • Erhört die „Komplexität“ der

    Komponente Aufgrund von verteiltem Content • “Slotted“ Elements weden im Context des „Hosts“ gestyled und verbleiben im Light-DOM Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
  19. Web Component für native Forms registrieren Write once, use anywhere

    Framework agnostische Design Systems auf Basis von Web Components
  20. • Property-Driven-Ansatz eignet sich ideal für Kleine, leichtgewichtige Komponenten, bei

    denen nur das “Verhalten” beeinflussen • Content-Driven-Ansatz eignet sich für Komponenten die auf eine flexible Komposition von ”Content” angewiesen sind. Oder für Komponenten die in einem Form-Context eingesetzt werden → Bspw. Layouts, Container, Cards etc. Empfehlung Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components
  21. Alles auf einen Blick Do’s & Don’ts Write once, use

    anywhere Framework agnostische Design Systems auf Basis von Web Components
  22. • Zu Beginn ausführlich das Projektumfeld prüfen • Für Library

    oder Framework entscheiden • Mit der grundlegenden Technologie vertraut machen • Saubere Projektstruktur aufsetzen • Komponenten klein und leichtgewichtig halten • Slotting / Contentprojection nutzen um Flexibilität zu erhöhen • Reger Austausch mit UI/UX Team • Nichts reimplementieren was der Browser schon für uns tut • Alles in der Komponente wegkapseln • Mehrere Zuständigkeiten in einer Komponente vermischen • Vom Projektdruck treiben lassen Do’s Don’ts Write once, use anywhere Framework agnostische Design Systems auf Basis von Web Components