CSS Inconsistency LDS and SF Orgs: Page Headers

[KevSlashNull]

Describe the bug In the LWC Local Dev Server, the page header does not render properly. This is probably related to nested styles originating from the outer Dev Server styles

To Reproduce Steps to reproduce the behavior:

1. Create an LWC Component: your-component (name not relevant)

   <template>
   <div class="slds-page-header">
   <div class="slds-page-header__row">
     <div class="slds-page-header__col-title">
       <div class="slds-media">
         <div class="slds-media__body">
           <div class="slds-page-header__name">
             <div class="slds-page-header__name-title">
               <h1>
                 <span title="test title" class="slds-page-header__title slds-truncate">test
                   title</span>
               </h1>
             </div>
           </div>
           <p class="slds-page-header__name-meta">henlo fren</p>
         </div>
       </div>
     </div>
   </div>
   </div>
   </template>

2. Start the Local Development Server
3. Click on c-your-component
4. See that the page header is not rendered properly

Expected behavior

The page header is rendered as detailed in the design spec: https://www.lightningdesignsystem.com/components/page-headers

Screenshots

The page header is not rendered correctly (mostly due to the missing border).

Desktop (please complete the following information):

• macOS
• Chrome
• Version 85, 64-bit

Additional context

While trying to find a reason why the page header does not render correctly, I found this CSS rule applying to .slds-page-header.

.slds-card .slds-page-header, .slds-tabs_card .slds-page-header {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: .25rem;
}

As I’m not using cards it is caused by the Dev Server component container having a .slds-card class.

[stale[bot]]

This issue has been automatically marked as type:bug-p3 because it has not had recent activity.

[git2gus[bot]]

This issue has been linked to a new work item: W-8208662

[davehahn]

Any word on this, it is affecting me in may different senarios and just want the page header rendered correctly