diff --git a/src/core/components/show-password/core-show-password.html b/src/core/components/show-password/core-show-password.html
index ef0ac0ce1..2aed670d7 100644
--- a/src/core/components/show-password/core-show-password.html
+++ b/src/core/components/show-password/core-show-password.html
@@ -1,4 +1,4 @@
-<slot></slot>
+<ng-content></ng-content>
 <ion-button fill="clear" [attr.aria-label]="label | translate" core-suppress-events (onClick)="toggle($event)">
     <ion-icon [name]="iconName" slot="icon-only"></ion-icon>
 </ion-button>
diff --git a/src/core/components/show-password/show-password.scss b/src/core/components/show-password/show-password.scss
index a0960f099..ac1c907a3 100644
--- a/src/core/components/show-password/show-password.scss
+++ b/src/core/components/show-password/show-password.scss
@@ -13,7 +13,7 @@
     }
 }
 
-::slotted(ion-input) {
+::ng-deep ion-input {
     --padding-end: 47px !important;
 }
 
diff --git a/src/core/components/show-password/show-password.ts b/src/core/components/show-password/show-password.ts
index d61856779..01337e88d 100644
--- a/src/core/components/show-password/show-password.ts
+++ b/src/core/components/show-password/show-password.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnInit, AfterViewInit, Input, ElementRef, ContentChild, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, AfterViewInit, Input, ElementRef, ContentChild } from '@angular/core';
 import { IonInput } from '@ionic/angular';
 
 import { CoreApp } from '@services/app';
@@ -37,7 +37,6 @@ import { CoreUtils } from '@services/utils/utils';
     selector: 'core-show-password',
     templateUrl: 'core-show-password.html',
     styleUrls: ['show-password.scss'],
-    encapsulation: ViewEncapsulation.ShadowDom,
 })
 export class CoreShowPasswordComponent implements OnInit, AfterViewInit {