Override style of app-header-layout's shadow DOM

Question

I'm having a bit of an awkward problem. I have the following template:

<app-header-layout>
  <app-header>
    <app-toolbar> ... </app-toolbar>
  </app-header>

  <main> ... </main>
</app-header-layout>

Let's say the app-header has a height of 200px. When the page is loaded, the #contentContainer of the app-header-layout shadow DOM will automatically be assigned a padding-top of 200px (based on the current height of app-header).

Then I have a media query for print which removes the app-header:

@media only print {
  app-header {
    display: none;
  }
}

So when I open the print dialog, the app-header isn't rendered, but #contentContainer still has a padding-top of 200px. I know app-header-layout has a resetLayout() method, but even if it were possible to reset the layout after the print dialog is open, I'd still want it to go back to its original value once I close the dialog.

Now my question is: can I force the padding-top of #contentContainer to be 0 when the media query for print is active? In other words, how can I override the style of #contentContainer in the shadow DOM of app-header-layout? I tried app-header-layout::shadow #contentContainer but it didn't work.

Answer 1

What you could also try is adding or removing css class with a bit of javascript, something like:

changeContainerPadding: function() {
    this.$.contentContainer.classList.add('zeroPadding');
    this.$.contentContainer.classList.remove('normalPadding');
}

Not really an elegant solution, but this approach sometimes help me in desperate times :)