app-header-layoutのshadow DOMのオーバーライドスタイル

Question

私は少し面倒な問題があります。

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

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

だがapp-headerは200pxの高さを持っているとしましょう：私は、次のテンプレートを持っています。ページが読み込まれると、app-header-layoutシャドウDOMの#contentContainerには、自動的にの現在の高さに基づいて、200pxのpadding-topが割り当てられます。

は、その後、私はapp-headerを削除し、印刷するためのメディアクエリをしている：私は、印刷ダイアログを開いたときに、app-headerは表示されません

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

が、#contentContainerはまだ200pxののpadding-topを持っています。私はapp-header-layoutがresetLayout()メソッドを持っていることを知っていますが、印刷ダイアログが開いた後にレイアウトをリセットすることができたとしても、ダイアログを閉じると元の値に戻ります。

私の質問は次のとおりです。padding-topの#contentContainerは、印刷のメディアクエリがアクティブなときに0にすることができますか？言い換えれば、app-header-layoutのshadow DOMの#contentContainerのスタイルをどのように上書きできますか？私はapp-header-layout::shadow #contentContainerを試しましたが、動作しませんでした。あなたはまた、追加またはJavaScriptのビットとCSSクラスを削除して試みることができる何

Answer 1

、何かのように：

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

そうでもない

エレガントな解決策が、このアプローチは、時には絶望的な時代に私を助けて:)