覆蓋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

回答

相關問題