Javascript 如何使用JS函数在Polymer 3中设置CSS样式

所以，我对Polymer还很陌生，但我已经学习了所有我能找到的教程，搜索功能也不能帮助我解决问题

我试图通过JS函数设置元素的样式。我知道我可以使用以下东西：

getColor () {
  if(this.is_even) {
    return  "background-color: green;";
  }
  else {
    return "background-color: red;";
  }
}

static get template() {
  return html`
    <div class="icon" style$="[[getColor()]]"></div>
  `
}

或许

.icon
{
  background-color$: [[getColor()]];
}

我试图通过这种语法根据特定条件编辑我的“：host”元素的样式，但我找不到任何关于它的内容

---

提前感谢：）

这里是如何使用css的示例：

编辑：还可以利用Polymer Lit元素的优势呈现html样式。为了使用发光元件

import { LitElement, html } from '@polymer/lit-element'; 

然后在扩展自定义元素lit元素的类之后：

class MyElement extends LitElement {
  static get properties(){.....
 ....

最后：

${this.is_even?
  html`<div class="icon" style="background-color: green;"></div>`:
  html`<div class="icon" style="background-color: red;"></div>`}

${this.u是偶数吗？
html``：
html``}

---

有关

的更多信息，我认为这在平面css中是不可能的。它可能是一个css预处理器语言，但我还没有研究这一点。但是，您在第一个代码块中显示的方式应该是有效的？！我知道第一个例子有效，但我从未说过相反的话。我只是觉得第二种语法更吸引人，并认为聚合物可能有这样的特点。对于我的项目来说，额外的预处理器会有点太多的开销，我只是希望该功能已经存在，但我就是找不到。不，不幸的是，这是不可能的，我高度怀疑有一天这将是一个功能。感谢您非常详细的示例。我想我会坚持使用基于观察者的解决方案，因为我的项目已经依赖于很多这样的解决方案。我还没有研究LitElement，我不认为我会为这个项目做什么，但我肯定会在开始下一个项目之前检查一下。

static get properties() {
    return {
      is_even: {
        type: Boolean,
        // Observer method identified by name
        observer: 'checkColor'
      }
    }
  } 

import { LitElement, html } from '@polymer/lit-element'; 

class MyElement extends LitElement {
  static get properties(){.....
 ....

${this.is_even?
  html`<div class="icon" style="background-color: green;"></div>`:
  html`<div class="icon" style="background-color: red;"></div>`}