[Ionic/Capacitor/Angular] Deep shadow style doesn't work on breadcrumb separator element

Capacitor
1

:triangular_flag_on_post: Issue

Hi, I’m trying to remove the breadcrumb separator margin (.breadcrumb-separator).

So I added different styles but none of them worked.

After inspecting with web-inspector, I noticed that breadcrumb separator was containing in a shadow dom who is contains in another shadow (shadowception :smile:).

So I tried with :host and I expect the style to come out on the separator but nothing is added.

Note: I cannot even see my style load in the inspector

Hope someone can solve it :love_letter:

:floppy_disk: Sources

breadcrumb.html

<div id="breadcrumbs-container">
    <ion-breadcrumbs>
        <ion-breadcrumb>
            <ion-icon name="arrow-back"></ion-icon>
        </ion-breadcrumb>
        <ion-breadcrumb>
            <ion-badge slot="start" color="success">1</ion-badge>
            Hello
        </ion-breadcrumb>
        <ion-breadcrumb>
            <ion-badge slot="start" color="success">2</ion-badge>
            World
        </ion-breadcrumb>
    </ion-breadcrumbs>
</div>

breadcrumb.scss

/* TRY #1 */
#breadcumbs-container {
    ion-breadcrumbs {
        span.breadcrumb-separator {
            margin: 0 !important;
        }
    }
}

/* TRY #2 */
#breadcumbs-container {
    ion-breadcrumbs {
        ::ng-deep {
            .breadcrumb-separator {
                margin: 0 !important;
            }
        }
    }
}

/* TRY #3 */
:host ::ng-deep {
    .breadcrumb-separator {
        margin: 0 !important;
    }
}

:iphone: Web Inspector Result

HTML

image
image1117×320 81.9 KB

As explained bellow I doesn’t have any css rules loaded in my element

CSS of .breadcrumb-separator

image
image988×604 65.4 KB

:information_source: Info

Ionic:

   Ionic CLI                     : 6.20.3
   Ionic Framework               : @ionic/angular 6.2.6
   @angular-devkit/build-angular : 14.2.2
   @angular-devkit/schematics    : 14.2.2
   @angular/cli                  : 14.2.2
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 4.2.0
   @capacitor/android : 4.2.0
   @capacitor/core    : 4.2.0
   @capacitor/ios     : 4.2.0

Utility:

   cordova-res                          : 0.15.4
   native-run (update available: 1.7.1) : 1.7.0

System:

   NodeJS : v14.17.4
   npm    : 8.19.1
   OS     : macOS Monterey
   Angular: 14
2

I found the solution, after checking in breadcrumb component I found a slot named separator who is not include in current documentation
You can see it here.

template.html

<p slot="separator" class="foo-separator">&gt;</p>

template.scss

.foo-separator { /* Your style */ }

I’ll create pull request to add it to the documentation