bug(angular | placeholder): component scoped css is not getting applied

[indraraj26]

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

if you place below css in global.scss then it will work for ion-input and ion-textarea but not for searchbar home.component.html

<ion-content>
    <ion-input placeholder="Input placeholder" class="first-name"></ion-input>
    <ion-searchbar
        placeholder="Searchbar placeholder"
        class="search-foo"
    ></ion-searchbar>
    <ion-textarea
        placeholder="Textarea placeholder"
        class="enter-chat"
    ></ion-textarea>
</ion-content>

home.component.scss

.first-name input::placeholder {
    font-size: 5px;
    color: hotpink;
}

.searchbar-foo .searchbar-input-container input::placeholder {
    font-size: 5px;
    color: rebeccapurple;
}

.enter-chat textarea::placeholder {
    font-size: 5px;
    color: orangered;
}

Expected behavior:

It should apply component scoped css on placeholder

Steps to reproduce:

Related code:

Repo : https://github.com/indraraj26/ionic5-starter-tabs-sidemenu/tree/placeholder-test Branch: placeholder-test

Other information:

Ionic info:

ionic info

Ionic:

   Ionic CLI                     : 5.4.4 (C:\Users\indra26\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.901.4
   @angular-devkit/schematics    : 9.1.4
   @angular/cli                  : 9.1.4
   @ionic/angular-toolkit        : 2.3.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)

Utility:

   cordova-res : 0.8.0 (update available: 0.15.1)
   native-run  : 0.2.9 (update available: 1.0.0)

System:

   NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. This is due to Angular's component scoping, not Ionic Framework. To work around this you have 2 options:

1. Disable encapsulation on your component:

   @Component({
   selector: 'app-home',
   templateUrl: './home.page.html',
   styleUrls: ['./home.page.scss'],
   encapsulation: ViewEncapsulation.None
   })

2. Move these styles to global.scss to avoid Angular automatically scoping them.

[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.