Polymer 在合成元素中传播CSS变量

我有一个元素（宿主），其中包含另一个元素（子元素）

在主机上设置CSS变量时，如何将CSS变量的值从主机传播到子级

例子：

子元素{
--按钮颜色：var（--菜单按钮颜色）；
}
钮扣{
颜色：var（--按钮颜色）；
}
我应该是一个红色的按钮

理想情况下，我可以这样使用它：

主元素{
--菜单按钮颜色：红色；
}

似乎正在工作（chrome），运行下面的代码片段

//设置聚合物选项
窗口聚合物={
多姆：“影子”
};
主元素{
--菜单按钮颜色：红色；
}
子元素{
--按钮颜色：var（--菜单按钮颜色）；
}
聚合物（{is:'主体元素'}）；
按钮{
颜色：var（--按钮颜色）；
}
我应该是一个红色的按钮
聚合物（{is:'子元素'}）；

css变量的行为类似于作用域变量。因此，您的代码无法正常工作。您可以使用默认值作为替代值。@a1626如果是这种情况，这是一种有点奇怪的行为，因为这种跨作用域的值传播在几乎任何编程上下文中都是语义正确的。默认值是什么意思？你愿意在回答中进一步说明吗？我想说的是，它们使用继承规则，必须在相同或父范围内定义才能工作（可能并不总是适用于Polymer，因为它是PolyField）。默认值的意思类似于

color:var（--按钮颜色，var（--默认颜色））

这种方式是

按钮颜色

没有定义，它返回到默认值，通常在应用程序主题中定义。至少可以说，polymer团队使用了大量的

材料
默认变量来定义这些独立元素的默认值。我会仔细检查我的代码，然后再回到这个问题上。
<!-- Host Element, includes <child-element> -->

<dom-module id="host-element">
  <template>
    <style>
      child-element {
        --button-color: var(--menu-button-color);
      }
    </style>

    <child-element><child-element>
  </template>
</dom-module>

<!-- Child Element, is declared within <host-element> -->

<dom-module id="child-element">
  <template>
    <style>
      button {
        color: var(--button-color);
      }
    </style>

    <button> I should be a red button </button>
  </template>
</dom-module>

<style>
  host-element {
    --menu-button-color: red;
  }
</style>

<host-element><host-element>