Author - StudySection Post Views - 27 views
angular

ViewEncapsulation in Angular

Introduction

As we know that in Angular, most of us work with a singular DOM tree that represents the entire page and is loaded into the browser which means all the CSS and javascript work against the entire document tree.

But if we want to import the part of the reusable components, the components should have their own styling Shadow DOM. Shadow DOM standard allows the view, style, and behaviour encapsulation.

Shadow DOM is like a parallel DOM tree hosted inside a component hidden away from the main DOM tree. Only Component itself has access to this shadow DOM not any other part of the application.

tree

Types of View Encapsulation

list

ViewEncapsulation.Emulated: Angular will not create a Shadow DOM for the component and style will be scoped to the component. This is the default value for encapsulation.

ViewEncapsulation.Native: Angular creates a Shadow DOM for the component and the style will be scoped to that Shadow DOM.

ViewEncapsulation.None: Angular will not create a Shadow DOM for the component and the component style can affect all nodes in the DOM.

If you have skills in PHP programming and you want to enhance your carrier in this field, a PHP certification from StudySection can help you reach your desired goals. Both beginner level and expert level PHP certification exams are offered by StudySection along with other programming certification exams.

Leave a Reply

Your email address will not be published. Required fields are marked *