覆盖 app-header-layout 的 shadow DOM 的样式答案

【问题标题】：Override style of app-header-layout's shadow DOM覆盖 app-header-layout 的 shadow DOM 的样式
【发布时间】：2018-02-11 10:55:38
【问题描述】：

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

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

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

假设app-header 的高度为 200 像素。当页面被加载时，app-header-layoutshadow DOM 的#contentContainer 会自动分配一个 200px 的padding-top（基于app-header 的当前高度）。

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

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

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

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

【问题讨论】：

可以做小提琴吗？
我不确定在小提琴中展示它是否那么简单。我不知道它如何处理打印媒体查询。如果我可以轻松地向您展示一些有用的东西，我会尝试并更新我的问题。

标签： css polymer shadow-dom polymer-2.x

【解决方案1】：

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

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

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

【讨论】：

我认为这不适用于我的情况，因为当@media 打印查询处于活动状态时，我必须运行它。这里最好的解决方案只涉及 CSS。我最终使用了一个仅用于打印的布局，其绝对位置“位于”contentContainer 的填充顶部。无论如何，感谢您的帮助，这在另一种情况下可能会有所帮助。