tabs: nested mat-tab-groups undesirably inherit @Inputs from parent

[mibeon]

Bug Report

Hey guys, I'm going crazy with this buggy feature of angular material. If you want to use a nested mat-tab-group inside of a mat-tab-group, which has background color of primary, all your child tab-groups gets the same background color. WHY the hell it happens???

Demo and steps to reproduce the issue

Take this example https://stackblitz.com/angular/oorxxxlyavb?file=src%2Fapp%2Ftab-group-basic-example.html or any other it doesn't matter.

Add or replace the content with that

<mat-tab-group backgroundColor="primary">
  <mat-tab label="First">
    <mat-tab-group>
      <mat-tab label="First"> Content 1 </mat-tab>
      <mat-tab label="Second"> Content 2 </mat-tab>
      <mat-tab label="Third"> Content 3 </mat-tab>
    </mat-tab-group>
  </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

AND SEE

The nested tab group should provide the default behavior, without background and colorized underline, because there is no property "backgroundColor", BUT IT DOESN'T. Instead it gets the same background color like it's parent.

---

We need either a fix for that unexpected behavior or a possibility to explicit unset the backgroundColor property.

---

Angular versions

• Angular: 11.0.0
• Angular Material: 11.0.3

[Splaktar]

Please submit Angular Material and CDK questions here and issues here. This repo is for AngularJS Material.

I have transferred this issue to the correct repository for you.

[Splaktar]

From the tabs placement docs:

Caution Avoid nesting a tab within another tab.

[Splaktar]

Here's a working StackBlitz demo of this issue. It shows that both the color and backgroundColor Inputs are inherited.

[Splaktar]

This demo shows that this is still the behavior when using the MDC-based tabs.

[crisbeto]

This happens, because our selectors are too broad and it's unintentional. It should be resolved by #21533.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}