CSS Custom Properties Are a Component's Styling API

A component's styling API is the set of custom properties it exposes on its root (:host in Angular, root class elsewhere). Parents customize a child by overriding those vars — never by reaching into the child's internal classes.

// child exposes its API
:host { --input-border-color: var(--color-border); }
.input { border-color: var(--input-border-color); }
 
// parent overrides through the API
.search-bar child-input { --input-border-color: var(--color-accent); }

This makes the customization surface explicit and documented instead of a hidden pierce. It is the direct replacement for ::ng-deep (banned) and any "reach past the boundary" hack: those couple the parent to the child's internal DOM, so any refactor inside the child silently breaks the parent. Overriding a published var cannot.

Same idea as an explicit component contract — a component is customizable only through what it deliberately publishes. Scope var names to the component (--text-input-border-color, not --input-border-color) so cascading vars never collide across unrelated components.

Source: css-conventions skill §12 (styling API), §4 (collisions).