All components should use ViewEncapsulation.None by default

All components should use ViewEncapsulation.None

Expected Behavior

Output HTML should not show _ngcontent-* etc attributes since they will not be utilized.

Current Behavior

Currently, all but two use default ViewEncapsulation.Emulated, which adds unnecessary markup to the outputted html. Since this framework is a wrapper for Materalize css framework, there is no reason to use view encapsulation since it already uses global styles. This will the output HTML very clean and easy to reason about.

I will be happy to do a PR if you approve this. If disapprove, please explain logic as to why.

[jfcere]

Hi @IAMtheIAM,

This is a good concern, we never thought about setting ViewEncapsulation.None as we wanted our component to be scoped like suggested by Angular (default value) but you make a good point saying that Materialize CSS already uses global styling.

Of course we wouldn’t want any bad behavior by switching but at first sight the risks seems minimal. Please let us talk about it and we’ll come back to you!

Btw thanks for bringing that up and wanting to help us.

[yim222]

Hi, I want to say that this default value on Angular also cause that such problems : https://stackoverflow.com/questions/44210786/style-not-working-for-innerhtml-in-angular-2-typescript

That the style don’t accessible to injected Elements, and you need to define it on component level.

I don’t big architect, but maybe it causes a little confusing and workaround vs. React that this the way things work, so I will be happy to understand why it’s important to define.

I understand that the concern to conflicts with component’s style. Is this the reason ?