Ionic-framework: Add view encapsulation attributes to generated elements to support view encapsulation in Ionic 2

[NoNameProvided]

Short description of the problem:

Ionic 2 components doesn't support view encapsulation, the custom view encapsulation attribute generated by angular is not inserted into elements generated by ionic. (Maybe because view encapsulation is turned off for ionic components? ref)

When I write

<ion-title> Title </ion-title>

ion-title .toolbar-title {
  color: green;
}

it will be generated into:

<ion-title _ngcontent-ily-4="">
    <div class="toolbar-title"> Events</div>
</ion-title>

So the div miss the generated scope for view encapsulation. This means I have no way to manipulate ionic components appearance from encapsulated css code, but only from globally applied one.

What behavior are you expecting?

Ionic components support view Encapsulation.

So the output should be:

<ion-title _ngcontent-ily-4="">
    <div class="toolbar-title" _ngcontent-ily-4=""> Events</div>
</ion-title>

Steps to reproduce:

1. Check out plnkr example
2. See the scenario described in the intro is valid

insert any relevant code between the above and below backticks

Which Ionic Version? 1.x or 2.x

Ionic 2

Plunker that shows an example of your issue

http://plnkr.co/edit/lPzp95sNdJ9lYViDE0PI?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.2.0
Gulp version: CLI version 1.2.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.31
Ionic App Lib Version: 2.0.0-beta.17
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.2.1
Xcode version: Xcode 7.3.1 Build version 7D1014

[NoNameProvided]

_platform:android_ and _platform:windows_ is affected as well.

[jgw96]

Hello, thanks for opening an issue with us! We have turned off view encapsulation with ionic 2 as there are some performance concerns, especially on ios, but because of how our sass is configured, there is no need for it at this time. To get encapsulated styles for each page you can just put your styles in the sass file for that page. I hope this makes sense, thanks for using Ionic! Since this is expected behavior i will be closing this issue for now.

[goldenbearkin]

how about styling an isolated custom component? The encapsulated styling is desired to gain reusability.

[5im0n]

It will be great if view encapsulation can be enabled on components.
I understand to encapsulated styles for each page make sense but not really for custom components to easily reuse it.

[stovmascript]

@jgw96 I don't understand how styles are being encapsulated per component/page? Here is an example of a background being overridden even thought it's wrapped by the component/page selector:

[liuxh0]

@jgw96
I know this is an old issue but I'm really expecting view encapsulation feature in order to build scalable apps. The sass configuration you mentioned helps in some degree but not perfect. If my custom component A uses my custom component B, the sass of A can simply overrides the sass of B.

Please consider enable view encapsulation!

[milottit]

I agree. It would be really useful to add the css view encapsulation in Ionic. By the way, what is the exact SASS configuration that mimic the view encapsulation?

[alexboisselle-rd]

bump

This was extremely disappointing news for my team. Really looking forward to this being enabled in the future.

[JonasRech]

Supports Ionic 3 view encapsulation?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.