在合成元素中传播CSS变量

Question

我有一个包含另一个元素（孩子）的元素（主机）。

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

实施例

<!-- 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>

Answer 1

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

＆＃13;

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;