Web Components vs. Microfrontends

Kurz: Web Components sind ein technischer Integrationsbaustein. Microfrontends sind eine Architektur- und Teamgrenze.

Web Components

  • Native Browser-Komponente: customElements.define().
  • Framework-neutral: Angular kann React-Komponente als HTML-Tag nutzen.
  • Gute Grenze für UI-Widgets, Design-Systeme, eingebettete Features.
  • Achtung: Attribute sind Strings; komplexe Daten besser als Properties setzen.

Microfrontends

  • App wird in unabhängig lieferbare Frontend-Teile geschnitten.
  • Kann mit Web Components gebaut werden — muss aber nicht.
  • Relevant bei mehreren Teams, Release-Zyklen, klaren Domänen.
  • Kosten: Routing, Auth, State, Versionen, Bundle-Größe, UX-Konsistenz.

React in Angular per Web Component

React → Custom ElementAngular nutzt TagEvents rausProps rein
  • React-App wird in ein Custom Element gewrappt, z.B. <user-card>.
  • Angular braucht meist CUSTOM_ELEMENTS_SCHEMA, damit unbekannte Tags erlaubt sind.
  • Daten rein: einfache Werte über Attribute; Objekte/Funktionen über DOM-Properties.
  • Daten raus: CustomEvent dispatchen, Angular hört mit (eventName).
  • Unmount sauber lösen: im disconnectedCallback React-Root unmounten.

Unter der Haube

  • Die React-Komponente wird normal gebaut: Vite/Webpack erzeugt ein JS-Bundle mit React-Code.
  • Dieses Bundle registriert beim Laden ein Browser-Element: customElements.define('user-card', ...).
  • Angular rendert dann nur einen normalen DOM-Tag: <user-card></user-card>.
  • Sobald der Tag im DOM auftaucht, ruft der Browser connectedCallback() auf.
  • Dort erstellt der Wrapper einen React-Root und mountet React in das Element oder dessen Shadow DOM.
  • Angular „besitzt“ außen den Tag; React „besitzt“ innen den Inhalt.
  • Beim Entfernen ruft der Browser disconnectedCallback() auf; React wird sauber unmounted.

Mini-Code mental model

class UserCardElement extends HTMLElement { connectedCallback() { createRoot(this).render(<UserCard />) } }

Shadow DOM?

  • Pro: Styles kapseln sich, weniger CSS-Leaks.
  • Contra: Theming, Fonts, Modals, Tooltips und E2E-Tests werden schwerer.
  • Wenn Design-System zentral ist: CSS Custom Properties als Theme-API anbieten.

Typische Detailfragen

  • Angular Change Detection sieht Custom-Element-Interna nicht automatisch.
  • React-Bundle nicht pro Komponente doppelt laden; shared deps planen.
  • SSR/Hydration ist möglich, aber oft der erste Stolperstein.
  • Browser-Support ist gut; alte Edge/IE-Welten brauchen Polyfills oder sind raus.

Ein Satz fürs Meeting

„Für React in Angular würde ich Web Components als schmale Integrationsgrenze sehen. Für echte Microfrontends nur, wenn Organisation und Deployment das rechtfertigen — sonst kauft man sich Komplexität ohne viel Gewinn.“