Html 如何在声明CSS变量的同一规则中使用该变量

在自定义元素的定义中，我有以下代码：

<dom-module id="dom-element">
  <style>
    p {
      --test: brown;
      color: var(--test);
    }
  </style>
  <template>
    <p>I'm a DOM element. This is my local DOM!</p>
  </template>

  <script>
    Polymer({
      is: "dom-element"
    });
  </script>

</dom-module>

为此：

p {
  color: ;
}

但我希望输出是：

p {
  color: brown;
}

演示可以在这里找到：

如果我不使用Polymer，并在纯JavaScript中创建自定义元素，CSS自定义属性将按预期工作

我搜索过谷歌，但没有找到相关的东西。这里有什么问题？如何将CSS自定义属性用于Polymer？

Polymer 1的CSS垫片（默认情况下启用）显然没有按照使用它的相同规则处理CSS变量声明，因此在这种情况下，您必须将声明移动到

：host

<!-- inside dom-module's template -->
<style>
  :host {
    --test: brown;
  }
  p {
    color: var(--test);
  }
</style>

：主持人{
--试验：棕色；
}
p{
颜色：var（--试验）；
}
你好，世界

<!-- inside dom-module's template -->
<style>
  :host {
    --test: brown;
  }
  p {
    color: var(--test);
  }
</style>