从儿童到父母的聚合物更新风格

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父元素和它所有的孩子都有从中