在CSS with Polymer中使用自定义属性

Question

我正在使用Polymer制作一个webapp。我有一个包含纸质按钮的自定义元素。我必须根据属性（或属性？）设置所述按钮的波纹颜色，以便在我的主html文件中我可以写 <my-element ripplecolor="red"></my-element>
我尝试了类似的东西 <paper-button style="--paper-button-ink-color: {{ripplecolor}};"></paper-button>
但它不起作用。

Answer 1

您可以执行类似

的操作

风格：

:host {    
  --my-ripple-color: red;
}
.someClass {
  --paper-button-ink-color: var(--my-ripple-color);
}

在JS onload

this.customStyle['--my-ripple-color'] = this.ripplecolor;
this.updateStyles();

Answer 2

使用Polymer 2，您只能使用.updateStyles()

style = this.getComputedStyleValue('--something');

获得风格

if (window.ShadyCSS) {
  style = ShadyCSS.getComputedStyleValue(el, '--something');
} else {
  style = getComputedStyle(el).getPropertyValue('--something');
}