<mwc-top-app-bar> needs a way to pad content below

[aomarks]

Content below a top-app-bar needs to be top-padded to account for the height of the fixed position bar, or else it will look like this, with the content hidden behind the bar:

In standard MDC, users have direct access to classes like mdc-top-app-bar--short-fixed-adjust which specify the padding needed for a given bar configuration. MWC users do not have access to these classes, since they are in component shadow DOM.

We have a few options:

1. Export a CSSResult from mwc-top-app-bar.js that provides these classes (or equivalents) that users can apply to their document or shadow root and then reference in their content. Something like:

.topAppBarPadding {
  padding-top: 64px; /* $mdc-top-app-bar-row-height */
}
@media (max-width: 599px) { /* $mdc-top-app-bar-mobile-breakpoint */
  .topAppBarPadding {
    padding-top: 56px; /* $mdc-top-app-bar-mobile-row-height */
  }
}
.topAppBarPaddingDense {
  padding-top: 48px; /* $mdc-top-app-bar-dense-row-height */
}
.topAppBarPaddingProminent {
  padding-top: 128px; /* $mdc-top-app-bar-prominent-row-height */
}

2. Add a <slot> to <mwc-top-app-bar> to hold user content, and the element automatically applies the right style. This seems like the more user-friendly option, but it does mean that the element becomes more of a full-layout-wrapper, which seems not ideal. Maybe worth the tradeoff, though?

[aomarks]

For the record, #379 fixed this by adding a new default slot for user content, which will automatically have the correct padding-top applied.