Definition wise, :host is designed specifically for component-level use. Its purpose is to select the parent component (referred to as the shadow host) from within the children (known as the shadow tree).
To dive deeper, Angular's :host selector falls under the realm of shadow DOM style scoping (explained in the CSS Scoping Module Level 1 section on the W3C website).
The angular documentation emphasizes using this selector for targeting the parent component from a child component perspective. However, comprehending its functionality might be challenging without understanding how the shadow tree operates. See the details in the documentation.
If your goal is to style a component globally, utilize the automatically included style.css file having a universal scope within Angular. Insert your CSS rules there for global accessibility across all components.
Utilizing component-specific CSS files enhances modularity in styling. This advantageous aspect includes:
- Using contextually relevant CSS class names and selectors for each component.
- Ensuring that class names and selectors are isolated to the component to avoid conflicts with other parts of the application.
- Preserving the component's styles unaffected by modifications made elsewhere in the application.
- Facilitating an organized project structure by housing CSS alongside TypeScript and HTML code for each component.
- Easily managing changes or removals of CSS specific to a component without extensive search efforts throughout the entire application.
Although possible to configure, it is highly cautioned against implementing ViewEncapsulation.None. Doing so will compromise the modular nature of CSS, which can otherwise be achieved effortlessly through global CSS files while upholding scoping constraints.