Polymer 从元素属性重写样式

我试图创建一个聚合物组件，可以通过改变它的属性来改变它的样式

我的基本组件如下所示：

  <dom-module id="item">
  <template>
      <style>

          #item {
              display: border-box;
              line-height: 1rem;
              color: var(--boxcolor, #345d83);
              margin: 10px;
              border-radius: 4px;
              border-top: 1px solid transparent;
              border-right: 1px solid transparent;
              border-bottom: 1px solid transparent;
              border-left: 4px solid #f2f2f2;
          }

          #item:hover {
              background-color: #f5f9fd;
              border-left: 4px solid var(--boxcolor, #345d83);
              border-top: 1px solid #f2f2f2;
              border-right: 1px solid #f2f2f2;
              border-bottom: 1px solid #f2f2f2;
          }

          .box {
              padding: 10px;
          }

          .subtitle {
              font-size: .9rem;
          }

      </style>

      <div id="item">
          <div class="box">
              <content></content>
              <div class="subtitle">
                  <strong>{{value}}</strong> {{label}}
              </div>
          </div>
      </div>
  </template>

  <script>
      Polymer({
          is: 'item',
          properties: {
              value: String,
              label: String,
              boxcolor: String
          }
      });
  </script>

#项目{
显示：边框框；
线高：1rem；
颜色：var（--boxcolor，#345d83）；
利润率：10px；
边界半径：4px；
边框顶部：1px实心透明；
右边框：1px实心透明；
边框底部：1px实心透明；
左边框：4px实心#f2f2；
}
#项目：悬停{
背景色：#f5f9fd；
左边框：4px实心变量（-boxcolor，#345d83）；
边框顶部：1px实心#F2F2；
右边框：1px实心#f2f2；
边框底部：1px实心#F2F2；
}
.盒子{
填充：10px；
}
.副标题{
字体大小：.9rem；
}
{{value}}{{label}
聚合物({
是：'项目'，
特性：{
值：字符串，
标签：字符串，
boxcolor:字符串
}
});

我想做的是这样使用这个元素：

<item value="5x" label="cooler than Hello!" boxcolor="#f00">My World now!</item>

我的世界现在！

有不同的方法来实现这一点。我的建议是使用下面链接中描述的自定义属性api

基本上，只要属性

boxcolor

发生更改，就需要更新自定义样式变量

--boxcolor

。下面是更新的脚本

<script>
  Polymer({
      is: 'item',
      properties: {
          value: String,
          label: String,
          boxcolor: {
            type: String,
            observer: '_boxColorChange'
          }
      },
      _boxColorChange: function(newValue) {
        this.customStyle['--boxcolor'] = newValue;
        this.updateStyles();
      }
  });
</script>

聚合物({
是：'项目'，
特性：{
值：字符串，
标签：字符串，
boxcolor：{
类型：字符串，
观察者：''u boxColorChange'
}
},
_boxColorChange:函数（newValue）{
this.customStyle['--boxcolor']=newValue；
this.updateStyles（）；
}
});

更新：看起来原始代码中定义了自定义样式变量。我错过了那部分。我已经更新了代码，以更新原始代码中可用的自定义样式变量