What exactly is going on here? In Angular, the component follows a metaphor where each component has its own view encapsulation. By default, this encapsulation is emulated (details below).
If needed, you can switch to a different ViewEncapsulation mode by adjusting the encapsulation property to one of these options:
ViewEncapsulation.None: No encapsulation is applied, allowing your component's style to affect any element matched by the CSS selector.
ViewEncapsulation.Emulated: Angular adjusts your component's styles (by adding custom attributes to selectors) to target only the relevant component, along with inserting an inline <style> tag in the head.
ViewEncapsulation.Native: Utilizes the browser's native shadow DOM (not compatible with older browsers).
For instance:
@Component({
...
encapsulation: ViewEncapsulation.Native,
...
})
Refer to Component Styles for further information.
In conclusion:
To prevent on-the-fly evaluation, consider placing your styles in a separate CSS file linked within the head of the HTML document. However, this may result in non-encapsulated styles for all components.
While ViewEncapsulation.Native could potentially offer better performance, there is no concrete evidence supporting this claim or clear method to benchmark it (refer to this related question), and it may not function properly on older browsers.