Tabs have a shadow if its parent has --md-elevation-level

[datvm]

What is affected?

Component

Description

I was so confused why my tabs have dark borders except the 3 tabs surrounding the selecting tab:

Turned out it's due to a parent's --md-elevation-level (for md-elevation effect).

Reproduction

Lit Playground with both the problematic one and a workaround one:

  <div style="position: relative; --md-elevation-level: 3; padding: 1rem;">
    <md-elevation></md-elevation>
    
    <p>Other content</p>
    
    <md-tabs><md-secondary-tab>😄 Smileys &amp; People</md-secondary-tab><md-secondary-tab>🐕 Animals &amp; Nature</md-secondary-tab><md-secondary-tab>🍊 Food &amp; Drink</md-secondary-tab><md-secondary-tab>💃 Activity</md-secondary-tab><md-secondary-tab>✈️ Travel &amp; Places</md-secondary-tab><md-secondary-tab>🎁 Objects</md-secondary-tab><md-secondary-tab>🕛 Symbols</md-secondary-tab><md-secondary-tab>⚽ Sports</md-secondary-tab><md-secondary-tab>🚩 Flags</md-secondary-tab></md-tabs>

    <p>Workaround:</p>
    <md-tabs style="--md-elevation-level: 0"><md-secondary-tab>😄 Smileys &amp; People</md-secondary-tab><md-secondary-tab>🐕 Animals &amp; Nature</md-secondary-tab><md-secondary-tab>🍊 Food &amp; Drink</md-secondary-tab><md-secondary-tab>💃 Activity</md-secondary-tab><md-secondary-tab>✈️ Travel &amp; Places</md-secondary-tab><md-secondary-tab>🎁 Objects</md-secondary-tab><md-secondary-tab>🕛 Symbols</md-secondary-tab><md-secondary-tab>⚽ Sports</md-secondary-tab><md-secondary-tab>🚩 Flags</md-secondary-tab></md-tabs>
  </div>

Workaround

See above, setting <md-tabs style="--md-elevation-level: 0"> fix it. I think the component itself should reset this.

Is this a regression?

No or unsure. This never worked, or I haven't tried before.

Affected versions

1.0.1

Browser/OS/Node environment

Microsoft Edge Version 118.0.2088.69 (Official build) (64-bit)

[asyncLiz]

I agree that the tab should include :host { --md-elevation-level: 0; }

On a bigger note, these individual tab elevations do not make sense. We may want to consider deprecating tab elevation in favor of using <md-elevation> wrapped around the <md-tabs> to give the proper shadow.

As it's implemented, it's not possible to set a single shadow for the row of tabs, they incorrectly have their own shadows.

[asyncLiz]

Reference b/316459034 to clean this up