How to target individual Ionic components on a page when there are multiple without creating another component?

I have multiple toolbars on a page and from the docs I understand it uses Shadow DOM.

How can I, on that page, give each of them individual styling without having to create additional components to host it.

In CSS it would be as simple as applying a class.

I’m new to Ionic 5 but have found the styling changes to be a lot tougher to get your head around.

Still is, as long as you’re using the documented CSS variables.

Thanks @rapropos I appreciate the help. I dont think my question was clear enough.

Let me try with some code:

<ion-app *ngIf="!user">
  <ion-router-outlet id="main-content"></ion-router-outlet>
</ion-app>

<ion-app *ngIf="user">
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" class="main-menu">
      <ion-content>
      <ion-header>
        <ion-toolbar class="main-menu-header">
          <ion-img src="assets/images/logo-menu.png"></ion-img>
        </ion-toolbar>
      </ion-header>
        <ion-list>
        <ion-menu-toggle *ngFor="let page of navigate" auto-hide="false">
          <ion-item [routerLink]="page.url" routerDirection="forward" [class.active-menu]="activePath === page.url">
              <ion-icon [name]="page.icon" slot="start" color="#EBF8FF"></ion-icon>
                  {{page.title}} 
          </ion-item>
        </ion-menu-toggle>
        </ion-list>
      </ion-content>
      <ion-footer>
        <ion-toolbar class="main-menu-footer">
        <p>
          Name
        </p>
        <p>
          name@example.com
        </p>
        </ion-toolbar>
      </ion-footer>
    </ion-menu>
  <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

In the same components stylesheet, I want to independently style the 2 different .

I’ve got the following style on one of them and I want the other to look different but naturally they both reflect the same look. Will I need to create individual components just to independently style them or is there a way to have classes or something similar so that I can target them?

ion-toolbar {
    --background: #4299E1;
    --padding-top: 25px;
    --padding-bottom: 25px;
}

Does this not do what you want?

ion-toolbar.main-menu-header {
    --background: #4299E1;
    --padding-top: 25px;
    --padding-bottom: 25px;
}

ion-toolbar.main-menu-footer {
  --other-values...
}

Thanks very much :slight_smile: I got a nudge on Twitter in the right direction too. I was doing it with a space between the ion-toolbar and the class.