Which Angular View Encapsulation Strategy Should You Use?

If you enjoy this story and find it helpful, feel free to like or share it with others who might appreciate it too!

---

I’m a fashion designer, and I’m preparing for a big fashion show. I have three different strategies for how my designs can be showcased to the world, much like the view encapsulation strategies in Angular.

First, let’s consider the Emulated strategy. I decide that each model will wear a unique outfit that is inspired by my collection but has a touch of their personal style. This way, my designs are visible, but they blend seamlessly with the models’ individuality. In Angular, this is like the Emulated view encapsulation where styles from the component are applied in a way that allows for a smooth integration with global styles, ensuring they don’t clash but rather complement each other.

Next, I have the Shadow DOM strategy, akin to the ShadowDom in Angular. Here, I create a special VIP section on the runway. Each model steps into this section, and the spotlight isolates them so that the audience sees only my design without any external influences. It’s like having a bubble around each model. In Angular terms, the ShadowDom strategy isolates styles so that my component’s styles don’t leak out and no external styles can seep in, providing a truly encapsulated experience.

Lastly, there’s the None strategy. I decide to let all the models roam freely among the audience, wearing my designs. They interact with everyone, and my designs mix with the crowd’s fashion. This is akin to the None strategy in Angular, where styles are globally applied without any encapsulation, allowing them to freely influence and be influenced by the surrounding styles.

So, whether I’m blending, isolating, or letting my fashion roam free, each strategy has its purpose and effect, just like Angular’s view encapsulation strategies. If you enjoyed this analogy, give it a like or share it with someone who might find it helpful!

---

Part 2: The Fashion Show in Code

I’ve decided on my strategies for the fashion show and now need to implement them in Angular. Here’s how it would look in code:

1. Emulated Encapsulation: This is the default mode in Angular. adding special tags to each model’s outfit so they blend with the overall show theme.

   import { Component, ViewEncapsulation } from '@angular/core';

   @Component({
     selector: 'app-fashion-show',
     templateUrl: './fashion-show.component.html',
     styleUrls: ['./fashion-show.component.css'],
     encapsulation: ViewEncapsulation.Emulated // This is the default setting
   })
   export class FashionShowComponent {}

In this setup, styles in fashion-show.component.css are scoped to FashionShowComponent but are applied using a technique that allows them to blend with global styles.

2. Shadow DOM Encapsulation: Similar to isolating each model in a VIP spotlight, ensuring no outside influence.

   import { Component, ViewEncapsulation } from '@angular/core';

   @Component({
     selector: 'app-vip-fashion-show',
     templateUrl: './vip-fashion-show.component.html',
     styleUrls: ['./vip-fashion-show.component.css'],
     encapsulation: ViewEncapsulation.ShadowDom
   })
   export class VipFashionShowComponent {}

Here, VipFashionShowComponent uses Shadow DOM, creating a boundary that prevents styles from leaking in or out. This is perfect for components needing strict isolation.

3. None Encapsulation: Like models mingling freely with the crowd, where styles are not restricted.

   import { Component, ViewEncapsulation } from '@angular/core';

   @Component({
     selector: 'app-open-fashion-show',
     templateUrl: './open-fashion-show.component.html',
     styleUrls: ['./open-fashion-show.component.css'],
     encapsulation: ViewEncapsulation.None
   })
   export class OpenFashionShowComponent {}

With ViewEncapsulation.None, styles in open-fashion-show.component.css are applied globally, affecting and being affected by all other styles.

Key Takeaways

• Emulated: Default, balances local and global styles, useful for most scenarios.
• Shadow DOM: Provides strict style encapsulation, ideal for reusable components needing isolation.
• None: No style encapsulation, allows full style sharing, useful when global styles need to apply.