Picture this:
export class CustomComponent {
styleNamespace: string;
constructor(private customStyles: CustomStyles) {
this.styleNamespace = customStyles.namespace;
}
}
And then design your template like so:
<div class="{{styleNamespace}}-container">
<h1 class="{{styleNamespace}}-main-title"></h1>
<h2 class="{{styleNamespace}}-sub-title"></h2>
</div>
This approach offers you full control over your styling, minimizing the chances of third-party styles conflicting with yours. However, what about performance? If there are around 20 bindings like this on average per template, could it impact performance enough to reconsider this method?
In theory, performance should not be impacted as it is a one-time binding. But could this potentially increase load time? Without solid testing, it's hard to say for sure.
I am aware of view encapsulation, but I prefer an approach that allows me to disable it without causing any issues.
Is there a more efficient way to achieve this, or is this current method considered effective?