View Encapsulation in Angular has potential to overthrow Tailwind CSS.

Have you ever wanted to isolate your styles but not fully crowd the Javascript DOM with unwanted styles.

Well let’s do a deep drive into what makes View Encapsulation a threat to Tailwind CSS in 2023.

I am no CSS or SCSS genius but I love me some good old Stylesheets.

When tailwind CSS first became popular I was all in. I enjoyed every bit but I would say Angular still has the upper hand in the battle for my attention.

What is View Encapsulation?

Every component made in Angular has the ability to modify and control how encapsulation is applied. Meaning styles can either affect the global application if selected or not.

What are some types of View Encapsulation?

There are many types of View Encapsulation, we will define a few.

The first is ViewEncapsulation.ShadowDom which handles rendering styles based on a built-in Shadow DOM API only native to a browser with Shadow DOM available. The shadow DOM host will make sure styles are not available outside shadow DOM.

The second is ViewEncapsulation.Emulated which does not affect other elements in the application and are only applied to a component’s view.

Angular will pre-processes all styles per a component and only apply them to the component’s view resulting in extra attributes being attached to them.

Some of these attributes are emulating a shadow DOM with tags such as _nghost or _ngcontent.

Emulated will add styles to the head of the document however they are using scoped styles matching any styles directly in the component and not globally in the application.

The third is ViewEncapsulation.None which means angular will not use Encapsulation for any components and all styles are made globally available to the application. These styles are added to the head of the document making them available everywhere in the application.

Conclusion

How about that, we just learned about Stylesheets in Angular.

If you asked me to write styles for your company.

I would say have looked at encapsulation? …because Angular makes it simple and easy to write Styles for any application.

Happy Coding!!