fix(title): can be used nested

fixes #14905

core/src/components/title/title.ios.scss

@@ -0,0 +1,22 @@
+@import "./title";
+
+:host {
+  @include position(0, null, null, 0);
+  @include padding(0, 90px, 0);
+
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+
+  transform: translateZ(0);
+
+  font-size: $toolbar-ios-title-font-size;
+  font-weight: $toolbar-ios-title-font-weight;
+
+  letter-spacing: -.03em;
+
+  text-align: $toolbar-ios-title-text-align;
+  box-sizing: border-box;
+  pointer-events: none;
+}

core/src/components/title/title.md.scss

@@ -0,0 +1,8 @@
+@import "./title";
+
+:host {
+  @include padding(0, 12px);
+
+  font-size: $toolbar-md-title-font-size;
+  font-weight: 500;
+}

core/src/components/title/title.tsx

@@ -4,7 +4,10 @@ import { createColorClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-title',
-  styleUrl: 'title.scss',
+  styleUrls: {
+    ios: 'title.ios.scss',
+    md: 'title.md.scss'
+  },
   shadow: true
 })
 export class ToolbarTitle {

core/src/components/toolbar/toolbar.ios.scss

@@ -26,24 +26,3 @@
 
   min-width: 0;
 }
-
-::slotted(ion-title) {
-  @include position(0, null, null, 0);
-  @include padding(0, 90px, 0);
-
-  position: absolute;
-
-  width: 100%;
-  height: 100%;
-
-  transform: translateZ(0);
-
-  font-size: $toolbar-ios-title-font-size;
-  font-weight: $toolbar-ios-title-font-weight;
-
-  letter-spacing: -.03em;
-
-  text-align: $toolbar-ios-title-text-align;
-  box-sizing: border-box;
-  pointer-events: none;
-}

core/src/components/toolbar/toolbar.md.scss

@@ -27,10 +27,3 @@
   min-width: 0;
   max-width: 100%;
 }
-
-::slotted(ion-title) {
-  @include padding(0, 12px);
-
-  font-size: $toolbar-md-title-font-size;
-  font-weight: 500;
-}