We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Encapsulation : ViewEncapsulation.None

I was just wondering why do we need to declare that the component where diagram is hosted be not encapsulated. I would like the styles in the component to not affect my other components and because I use same classes in the component as other component, it affects them. 

But when I do not set the ViewEncapsulation to None, the styles declared in the .scss file is ignored and it not applied.


5 Replies 1 reply marked as answer

SJ Sivaranjith Jeyabalan Syncfusion Team April 18, 2023 11:35 AM UTC

Hi Deepak,

When we set view encapsulation to none, it will disable view encapsulation completely. Styles defined in a component's CSS file or template will be applied globally to the entire application. This approach can be useful when you need to apply a global style to a specific component or when you want to share styles across components. If you didn’t set view encapsulation by default the value will be set as Emulated. It uses the Shadow DOM to encapsulate the styles of a component. The styles are scoped to the component, but they can still be overridden by global styles. We have created a sample where we didn’t set the encapsulation and used the styles in the scss file. Please refer the sample below.

Sample: Flfawf (forked) - StackBlitz 


Regards,

Sivaranjith



DS Deepak Shakya replied to Sivaranjith Jeyabalan April 19, 2023 04:17 AM UTC

Hi,


Thanks for sending in the example where encapsulation was commented out and the CSS from .SCSS file was honoured. This happens to me as well but only for the top level but for example - If I set the css for a canvas element with the id of "Terminator", this is not implemented.


I am using HTML nodes and have styles applied in scss file which is not applied when I set the encapsulation to default. This is only applied when I set the Encasulation to None.

https://stackblitz.com/edit/angular-fauzx2-wzgxrt?file=src/app.component.scss



SJ Sivaranjith Jeyabalan Syncfusion Team April 19, 2023 01:11 PM UTC

Hi Deepak,

when we set viewEncapsulation.Emulated, then we will not be able to apply the CSS for the nested element in the component.


For your reference Link: https://github.com/angular/angular/issues/7400

If you want to set the custom style with viewEncapsulation.Emulated then you can use ::ng-deep shadow-piercing descendant combinator which will force a style down through the child component tree into all the child component views. Please refer to the following code example and sample link. 

Code example:

::ng-deep #Terminator {

    background-color: green;

  }


Sample: Flfawf (forked) - StackBlitz



DS Deepak Shakya replied to Sivaranjith Jeyabalan April 19, 2023 02:00 PM UTC

Hi,


Thanks once again. Since ::ng-deep is deprecated, I would rather not use it and use the ViewEncapsulation:None to apply the global styles. It would have been good if I could use the encapsulation as the component which containes the diagram with palette has other styles that I would like to customise.



SJ Sivaranjith Jeyabalan Syncfusion Team April 20, 2023 06:20 AM UTC

Hi Deepak

Thank you. We suggest you to use ViewEncapsulation.None instead of :: ng-deep. This is definitely a better approach in the long term, as ::ng-deep is deprecated and may be removed in future versions of Angular and there is no other better alternate for this. 



Marked as answer
Loader.
Up arrow icon