css - 覆盖 app-header-layout 的影子 DOM 样式

Question

我遇到了一个尴尬的问题。我有以下模板:

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

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

假设 app-header 的高度为 200px。当页面加载时，app-header-layout shadow DOM 的#contentContainer 将自动分配一个 200px 的 padding-top (基于 app-header 的当前高度)。

然后我有一个用于打印的媒体查询，它删除了 app-header:

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

所以当我打开打印对话框时，app-header 没有呈现，但是 #contentContainer 仍然有一个 padding-top 200 像素。我知道 app-header-layout 有一个 resetLayout()方法，但即使在打印对话框打开后可以重置布局，我仍然希望它在关闭对话框后恢复到原来的值。

现在我的问题是:当打印媒体查询处于事件状态时，我可以强制 #contentContainer 的 padding-top 为 0 吗？换句话说，如何在 app-header-layout 的影子 DOM 中覆盖 #contentContainer 的样式？我尝试了 app-header-layout::shadow #contentContainer 但它没有用。

Answer 1

您还可以尝试使用一些 javascript 添加或删除 css 类，例如:

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

这不是一个真正优雅的解决方案，但这种方法有时会在绝望的时候帮助我:)