從兒童到父母的聚合物更新風格

Question

我有2個元素。第一個名爲test-佈局使用樣式從core-layout

在測試佈局：

<link rel="import" href="../commons/core-layout.html"> 
<style include="core-layout"></style> 
<div class="containerTest">Test Layout Text</div> 

在覈心佈局：

<style> 

.containerTest{ 
    color: var(--color, blue); 
} 
</style> 

<div class="containerTest">Core Layout Text</div> 

<script> 
_mediaChanged(e){ 

if(this.mediaDetail.desktop){ 
     this.customStyle['--color'] = 'blue'; 
     this.updateStyles(); 
    } 
    else if(this.mediaDetail.tablet){ 
     this.customStyle['--color'] = 'green'; 
     this.updateStyles(); 
    } 
    else if(this.mediaDetail.mobile){ 
     this.customStyle['--color'] = 'red'; 
     this.updateStyles(); 
    } 
} 
</script> 

_mediaChange()使用鐵傳媒查詢通知如果視圖是桌面，平板電腦或移動設備，則爲我。從那裏我改變字體顏色

當我調整頁面的大小時，core-layout中的文字發生變化，但test-layout（父母）中的文字不變。

平板尺寸

移動視圖

桌面視圖

有沒有辦法讓我更新父（測試版）？我想用core-layout的樣式，依賴媒體，我不希望有所有的樣式複製到每一個部件

---

SOLUTION

好吧，我想我想通了。如果我從test-layout更改混合，然後它的工作。我想它必須只從父母到孩子，而不是相反。我所做的是將_mediaChanged()改爲test-layout而不是

Answer 1

Mixins和CSS變量是父類>子類相關的，當你想應用它們時，爲了更新孩子的變量，你需要在可以應用變更的父類中使用api他們自己，它會改變它的所有兒童。

您的解決方案移動_mediaChanged()方法的工作，因爲你感動的變量分配新建分配FY父元素和它所有的孩子都有從中