Angular styling

This is the general CSS layer for an Angular app - the rules for how stylesheets are scoped, where they live, and which modern CSS to reach for. It holds whether or not the app uses Material. The framework itself (signals, change detection, templates, NgOptimizedImage, the @angular/animations stance) is angular-conventions; load it alongside. Anything Material-specific - the mat.theme API, the --mat-sys-* system tokens, density, and styling Material components - is owned by angular-material and is not restated here. This file is opinion, not reference: it states the choices the team has settled on. For any CSS feature's exact browser support, check MDN or web.dev rather than memory. Above these general conventions, a project's own config (its stylelint/Prettier setup, .editorconfig) and its docs/PROJECT-CODE-STYLE.md are higher priority: where a project diverges, follow the project.

Floor is Angular 17+. Reach forward to v20/v21 idioms but adopt only what the installed version ships, and flag a forward API with a version tag.

Component styles are scoped by default - keep them that way

A component's styles or styleUrls are scoped to that component by ViewEncapsulation.Emulated, the default. Angular stamps a unique attribute (_ngcontent-*) onto the component's host and template elements and rewrites every selector in the stylesheet to match it, so the rules cannot leak out and repaint a sibling. This is the right default; do not change it to reach into something. The encapsulation only stops styles leaking out - global styles defined in styles.css still flow in and match elements inside an emulated component, which is exactly how a theme reaches the whole tree.

The other modes - None (every selector goes global), ShadowDom (real isolation, but a global theme stops at the boundary), and v21's experimental isolated variant - each trade that model away; the mode-by-mode comparison is references/encapsulation-modes.md - read it before changing encapsulation on any component. And do not lean on encapsulation as a specificity weapon: Angular itself does not 100% guarantee a component's styles win over outside styles even in Emulated or ShadowDom.

:host and :host-context

• :host styles the component's own host element from inside its stylesheet - the one selector that legitimately targets the element the component is mounted on. Use :host(.is-active) to react to a class on the host, and set host-level layout (display, padding) here rather than wrapping the template in an extra div.
• :host-context(selector) matches when any ancestor up the tree matches selector - the clean way to theme a component off a .dark or .rtl class set high in the document, without a global override. It works under Emulated (the compiler emulates it) but not under ShadowDom. Prefer a CSS custom property contract over :host-context when the variation is a value rather than a structural switch.

::ng-deep is discouraged - the three sanctioned ways out