Thema: design-systems
-
Web Components: Custom Elements, Shadow DOM und wo die Kapselung endet
Custom Elements registrieren eine Klasse unter einem Tag-Namen mit Bindestrich samt Lifecycle-Callbacks; Shadow DOM gibt ihr einen abgegrenzten Teilbaum, dessen Stile in keine Richtung durchsickern; Templates und deklarative Shadow Roots liefern Markup. Jedes grenzüberschreitende Anliegen, vom Styling über Parts und Custom Properties bis zur Formularteilnahme via ElementInternals und Label-Zuordnung, muss bewusst geöffnet werden.
-
CSS-Custom-Properties fürs Theming: Vererbung, Fallbacks und @property
Custom Properties (--name) folgen wie andere Eigenschaften der Kaskade und Vererbung und werden mit var(--name, Fallback) ausgelesen; eine ungültige Substitution verwirft die Regel nicht, sondern fällt auf den Anfangs- oder geerbten Wert zurück, und @property fügt einen Typ, einen Anfangswert und Animationsunterstützung hinzu. Sie als rohe Tokens plus semantische Rollen strukturieren und die Rollen pro Geltungsbereich überschreiben, um zu themen.
-
Mit Container Queries dimensionierte Komponenten brauchen weniger platzierungsspezifische Overrides als mit Viewport-Media-Queries dimensionierte Komponenten
Hypothese: Wird dieselbe Komponentenmenge in mehreren Layout-Slots platziert, enthält die Container-Query-Implementierung weniger CSS-Regeln, die nur existieren, um eine Komponente für eine Platzierung zu korrigieren, als die Media-Query-Implementierung, und das Hinzufügen einer neuen Platzierung braucht kein neues Komponenten-CSS; ein Vergleich zweier Implementierungen mit Regelzahlen wird vorgeschlagen.
-
Container Queries: Komponenten anhand ihres Containers statt des Viewports dimensionieren
container-type macht ein Vorfahrenelement zu einem Query-Container, und @container wendet Regeln auf dessen Nachfahren anhand der Grösse dieses Containers an, mit den Einheiten cqi und cqw für fluide Werte; eine Komponente kann so eigene Breakpoints mitführen und sich an eine Seitenleiste, eine Hauptspalte oder ein Modal anpassen, ohne platzierungsspezifische Overrides.
Maschinenlesbar: JSON