覆盖app-header-layout阴影的风格DOM

我有点尴尬的问题。我有以下模板：覆盖app-header-layout阴影的风格DOM

<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仍具有200像素一个padding-top。我知道app-header-layout有一个resetLayout()方法，但即使可以在打印对话框打开后重置布局，我仍然希望它在关闭对话框后恢复到其原始值。

现在我的问题是：我可以强制的#contentContainer的padding-top为0时，媒体查询打印是活跃？换句话说，我如何在app-header-layout的影子DOM中重写#contentContainer的样式？我试过app-header-layout::shadow #contentContainer，但没有奏效。

来源

2017-09-02 Raph

可以做小提琴吗？ – Ofisora

我不确定在小提琴中展示这一点很简单。我不知道它如何处理打印媒体查询。如果我可以轻松找到能够向你展示的东西，我会试试并更新我的问题。 – Raph

什么，你也可以尝试是增加或与一些JavaScript移除CSS类，类似：

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

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

来源

2017-09-04 15:52:01

我不认为这在我的情况下会起作用，因为当@media查询打印时，我必须运行此操作。这里最好的解决方案只涉及CSS。我最终只使用了位于absoluteContent的填充位置上的“绝对位置”的打印布局。无论如何感谢您的帮助，这可能有助于另一种情况。 – Raph

覆盖app-header-layout阴影的风格DOM

回答

相关问题