Angular View Encapsulation

Als Einsteiger in Angular stellt man sich viele Fragen. Eine davon betrifft die View Encapsulation: Soll man sie aktivieren oder nicht? Was genau bewirkt sie? In diesem Beitrag teilen wir unsere Erfahrungen und erläutern den Unterschied kurz und verständlich.

View Encapsulation - Was ist das überhaupt?

Schaltet man View Encapsulation ein, isoliert Angular gekonnt die Styles deiner Komponenten. Jeder Stil bekommt sein eigenes, einzigartiges Tag und bleibt strikt an seine Komponente gebunden.

<!-- Kompiliertes HTML -->
<div class="_ngcontent-c0 my-style">
	This is my component
</div>

<style>
 .my-style._ngcontent-c0 {
   color: blue;
 }
</style>

Das Schöne daran? Du kannst innerhalb deiner Komponente generische Klassen nutzen, ohne Angst vor Kollisionen zu haben. Schluss mit langen, unhandlichen Klassennamen. Aber, wie bei allem, gibt’s auch hier einen Haken: Features wie Content Reflection stehen aussen vor. Nutzt du einen Komponententeil woanders, verliert er seinen Style. Und Vorsicht: Manchmal kannst du dich dabei erwischen, wie du Styles wiederholst, was neben mehr code zu Inkonsistenz führen kann.

Unsere zwei Cent dazu

Ohne Hilfsmittel wie Tailwind CSS oder ähnlich und unter Einsatz von View Encapsulation kann das Styling zur Herausforderung werden. Mit View Encapsulation musst du genau entscheiden, welche Styles du den Komponenten direkt zuweist und welche global bleiben, um Inkonsistenz und doppelten Code zu vermeiden. Wenn du jedoch Tailwind CSS nutzt, wird vieles erleichtert. Die meisten Styles sind ohnehin global, und du kannst die komponentenspezifischen Styles für wirklich einzigartige Anforderungen reservieren, die nicht global sein sollen. Auch wenn man die Möglichkeit hat, ::ng-deep zu verwenden, sollte dies vermieden werden. Styles, die mit ::ng-deep definiert sind, sollten als global betrachtet werden und nicht in das Komponenten-Stylesheet eingefügt werden, wenn man View Encapsulation verwendet.

Fazit

Es gibt kein Schwarz oder Weiss. Alles hängt von der Organisation deines Styling-Ansatzs ab. Wir? Wir setzen auf Encapsulation und greifen meist zu Tailwind – aus offensichtlichen gründen.