從元素中覆蓋樣式atrribute

Question

我正在嘗試通過更改屬性來創建可以變爲樣式的聚合物組件。

我的基本組成是這樣的：

<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> 

我所要做的是使用這個元素，例如：

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

Answer 1

有不同的方法來完成這項工作。我的建議是使用下面鏈接中描述的定製屬性api。

https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-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> 

更新：看起來像是原始代碼中定義的自定義樣式變量。我錯過了那部分。我更新了代碼以更新原始代碼中可用的自定義樣式變量。