查询polymer.dart自定义属性值

Question

如何在Polymer.dart 1.0中查询自定义属性的值？

我有：

<style is="custom-style">
  my-element {
    --my-color: #ffffff;
  }
</style>

将其传递给my-element的子元素可以正常工作，例如：

.header {
  --paper-toolbar-color: var(--my-color);
}

但是如何以适用于所有浏览器的方式在my-element中查询Dart中的值？

我在$['header'].customStyle['--paper-toolbar-color']以及this上尝试了--my-color，但是除非我首先从Dart设置customStyle，否则它无效。

我已设法通过设置

在Chrome中解决此问题

.header {
  color: var(--my-color);
}

然后使用$['header'].getComputedStyle().color;阅读此内容，但Firefox会返回继承的颜色值，而不是自定义属性中的颜色值。

有什么想法吗？谢谢！

Answer 1

据我所知，您目前只能读取当前组件中声明的CSS变量，但无法从组件内部读取全局CSS变量。

如果您的标题组件中有此内容：

<style>
  :host {
    --my-color: #ffffff;
  }

  .header {
    --paper-toolbar-color: var(--my-color);
  }
</style>

然后你可以用

阅读它

customStyle['--my-color']

否则你的解决方法就好了。