From a93c799e8f963da554afaabb5e8fcfe8832de2ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 10 May 2022 11:53:03 +0200
Subject: [PATCH] MOBILE-4060 theme: Fix ionic mixin when using
 add-root-selector

More info: https://github.com/ionic-team/ionic-framework/pull/25264
---
 src/theme/helpers/ionic.functions.string.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/theme/helpers/ionic.functions.string.scss b/src/theme/helpers/ionic.functions.string.scss
index db045dc75..34a01c114 100644
--- a/src/theme/helpers/ionic.functions.string.scss
+++ b/src/theme/helpers/ionic.functions.string.scss
@@ -147,9 +147,10 @@
     // If the selector contains :host it means it is targeting just the host
     // element so we can change it to look for host-context
     } @else if str-contains($selector, ":host") {
-      $list: append($list, ":host-context(#{$addHostSelector})", comma);
-    // If the selector does not contain host at all it is either a shadow
-    // or normal element so append both the dir check and host-context
+      $shadow-element: str-replace($selector, ":host", ":host-context(#{$addHostSelector})");
+      $list: append($list, $shadow-element, comma);
+      // If the selector does not contain host at all it is either a shadow
+      // or normal element so append both the dir check and host-context
     } @else {
       $list: append($list, "#{$addHostSelector} #{$selector}", comma);
       $list: append($list, ":host-context(#{$addHostSelector}) #{$selector}", comma);