Hi. Because that's what components are for. Component ecapsulates some UI element and makes it reusable. Furthermore, when contained in it's own module and imported only where needed it could be lazily loaded thus making initial bundle lighter. Styles are part of the component and don't expose class names to other parts of the app.

Directives are good for reusable logic. Here we want to reuse the UI and make sure styles don't leak anywhere which makes it a perfect choice.

For some cases though, we would have to fall back to directives (e.g. for styling inputs) as elements are not containers and therefore we can't augment them with components. But this makes us use global styles that influence elements they were not supposed to and also we would need to solve naming collisions.