Why Web (Essential JS2) use encapsulation: ViewEncapsulation.None

[Jairo Martins Marques]

Hi Guys,

All my components use encapsulation Emulated (default), but all samples in Syncfusion documentation use Encapsulation None.

When I use Emulated my grid doesn't render ok. What I need to do to use default encapsulation?

Regards,

Jairo Marques

View Encapsulation

View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa. Angular provides three encapsulation strategies:

• Emulated(default) - styles from main HTML propagate to the component. Styles defined in this component's@Componentdecorator are scoped to this component only.
• Native- styles from main HTML do not propagate to the component. Styles defined in this component's@Componentdecorator are scoped to this component only.

• None- styles from the component propagate back to the main HTML and therefore are visible to all components on the page. Be careful with apps that haveNoneandNativecomponents in the application. All components withNoneencapsulation will have their styles duplicated in all components withNativeencapsulation.

Source:

https://angular-2-training-book.rangle.io/handout/advanced-components/view_encapsulation.html

[Pavithra Subramaniyam]

Hi Jairo, 

We have checked your query but we could not reproduce the issue at our end. We have prepared a simple sample based on your query. Please refer to the below sample link. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/encapsulation574590462  

Could you please provide the below details that will be helpful for us to provide a better solution as early as possible. 

1. Share your sample Grid code and style reference.
2. Please reproduce the issue, if possible
3. Share issue reproducible sample

Regards, 

Pavithra S. 

[Jairo Martins Marques]

Hi Pavithra S. 

I want to use the grid styles inside my component only, so, using your code, if I move the styles from styles.css to app.component.css the grid was not rendering ok.

It will render ok if I change the encapsulation to none.

This is a normal behavior?

Regards,

Jairo Marques

[Pavithra Subramaniyam]

Hi Jairo, 

While using the Essential JavaScript 2 Style within the component with ViewEncapsulation.Emulated, CSS selectors will be changed which will affect the Style of Essential JavaScript 2 Grid. So we would like to suggest you use ViewEncapsulation.None For Essential JavaScript 2 Grid component. 

Regards, 

Pavithra S. 

[Jairo Martins Marques]

Pavithra S.,

unfortunately I couldn't use ViewEncapsulation.None because this setting is interfering in my project and other components that I use.

Why Essential JavaScript 2 Style doesn't have a style css that I can use inside the component with ViewEncapsulation.Emulated? is this not a idea behind componentization?

As a workaround I'm trying to use globally in my styles.scss but I'm having some issues. In my component I want to hide the grid header, so I put in my component scss:

.e-grid { //Hide grid Header

.e-gridheader, .e-columnheader {

display: none;

}

.e-headercontent {

display: none;

}

.e-icon-gdownarrow,

.e-icon-grightarrow {

text-indent: 1px;

}

.e-recordplusexpand,

.e-recordpluscollapse {

width: 5px;

padding-left: 10px;

}

.e-groupcaption,

.e-indentcell,

.e-recordplusexpand,

.e-recordpluscollapse {

padding-left: 20px;

}

}

But the header ins only hidden if I use ViewEncapsulation.None

Please help me!

[Jairo Martins Marques]

Pavithra S.,

unfortunately I couldn't use ViewEncapsulation.None because this setting is interfering in my project and other components that I use.

Why Essential JavaScript 2 Style doesn't have a style css that I can use inside the component with ViewEncapsulation.Emulated? is this not a idea behind componentization?

As a workaround I'm trying to use globally in my styles.scss but I'm having some issues. In my component I want to hide the grid header, so I put in my component scss:

.e-grid { //Hide grid Header

.e-gridheader, .e-columnheader {

display: none;

}

.e-headercontent {

display: none;

}

.e-icon-gdownarrow,

.e-icon-grightarrow {

text-indent: 1px;

}

.e-recordplusexpand,

.e-recordpluscollapse {

width: 5px;

padding-left: 10px;

}

.e-groupcaption,

.e-indentcell,

.e-recordplusexpand,

.e-recordpluscollapse {

padding-left: 20px;

}

}

But the header ins only hidden if I use ViewEncapsulation.None

Please help me!

I did a sample to better clarify my problem. 

Attachment: Arquivo_Comprimido_41441ca7.zip

[Pavithra Subramaniyam]

Hi Jairo, 

Query #1: Why Essential JavaScript 2 Style doesn't have a style css that I can use inside the component with ViewEncapsulation.Emulated?  

We have analyzed your query but if 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  

Query #2: I'm trying to use globally in my styles.scss but I'm having some issues. In my component I want to hide the grid header, so I put in my component scss 

If you want to set the custom style to the Grid Component 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. 

[component.scss] 

.e-grid ::ng-deep{ //Hide grid Header  

    .e-gridheader, .e-columnheader {  

        display: none; 

    } 

.   .  . 

} 

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/custom_style-738901438  

Reference Link: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep  

Regards, 

Pavithra S. 

[Jairo Martins Marques]

Hi Pavithra S.,

using ::ng-deep I could solve my issue.

Thank you!

[Pavithra Subramaniyam]

Hi Jairo, 

Thanks for your update. 

We are glad to hear that the provided solution helped you. 

Please contact us if you have any queries. 

Regards, 

Pavithra S.