Question

我有一点尴尬的问题。我有以下模板：

template <class... Data>
std::array<font_heap, sizeof...(Data)>
get_font_heaps(Data const&... d) {
    return {{get_font_heap_from_data(d)...}};
}

让我们说<app-header-layout> <app-header> <app-toolbar> ... </app-toolbar> </app-header> <main> ... </main> </app-header-layout>的高度为200px。加载页面后，app-header影子DOM的#contentContainer将自动分配app-header-layout 200px（基于padding-top的当前高度）。

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

app-header

因此，当我打开打印对话框时，@media only print { app-header { display: none; } }未呈现，但app-header仍然有#contentContainer 200px。我知道padding-top有一个resetLayout()方法，但即使在打印对话框打开后可以重置布局，我仍然希望它一旦恢复原始值关闭对话框。

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

Answer 1

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

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

这不是一个优雅的解决方案，但这种方法有时可以在绝望的时候帮助我：）

覆盖app-header-layout阴影DOM的样式

1 个答案: