angular-styling

Use a CSS custom property as a theming contract: the child exposes a variable like --card-padding and the parent sets it, since custom properties pierce encapsulation by design. Alternatives are a global stylesheet rule targeting a stable class, or ViewEncapsulation.None on a small leaf component.

Use the default ViewEncapsulation.Emulated everywhere unless a specific reason says otherwise. None makes all selectors global and suits only deliberate global leaf components, while ShadowDom breaks :host-context and blocks global themes, fitting only self-contained distributable widgets.

Ionic components use real shadow DOM, which blocks inbound global styles silently. Style them only through their published CSS custom properties like --background and --ion-* theme variables, or their ::part() selectors, both of which cross the shadow boundary by design.

The house default is scoped component SCSS with a CSS custom property token system, keeping styles beside components and leveraging Angular encapsulation. Adopt Tailwind only on explicit team opt-in for design-system-driven apps, installed via ng add tailwindcss, and never mix both ad hoc.

Style focus with :focus-visible instead of removing outlines, wrap non-essential animations in a prefers-reduced-motion media query, and meet WCAG AA contrast of 4.5:1 for text and 3:1 for large text and non-text UI. Verify by measuring computed contrast ratios and running stylelint.

Use container queries with container-type: inline-size when a component must adapt to the space it is dropped into, such as a card in a variable-width sidebar. Reserve viewport media queries for page-level layout, and write all styles mobile-first with min-width overrides.