<polymer-element name="chromedash-color-status" attributes="value max width height corner">
  <template>
    <link rel="stylesheet" type="text/css" href="../css/elements/chromedash-color-status.css">
    <style>
      span {
        width: {{width}}px;
        height: {{height}}px;
      }
    </style>
    <span id="status"></span>
  </template>
  <script>
    Polymer('chromedash-color-status', {
      max: 7,
      width: 10,
      height: 10,
      corner: false,
      cornerChanged: function() {
        this.corner ? this.$.status.classList.add('corner') :
                      this.$.status.classList.remove('corner');
      },
      updateColor: function() {
        var h = Math.round(120 - this.value * 120 / this.max); 
        this.$.status.style.backgroundColor = 'hsl(' + h + ', 100%, 50%)';  
      },
      valueChanged: function() {
        this.updateColor();
      },
      maxChanged: function() {
        this.updateColor();
      }
      /*widthChanged: function() {
         //this.$.status.style.width = this.width + 'px';
         //this.widthUnits ? this.corner ? '%': 'px';
      },*/
      /*heightChanged: function() {
        //this.$.status.style.height = this.height + 'px';
        this.heightUnits = this.corner ? '%': 'px';
      }*/
    });
  </script>
  </polymer-element>

<polymer-element name="chromedash-color-status" attributes="value max width height corner">
  <template>
    <link rel="stylesheet" type="text/css" href="../css/elements/chromedash-color-status.css">
   <!--<style>
      span {
        width: {{width}}px;
        height: {{height}}px;
      }
    </style>-->
    <span id="status"></span>
  </template>
  <script>
    Polymer('chromedash-color-status', {
      max: 7,
      width: 10,
      height: 10,
      corner: false,
      cornerChanged: function() {
        this.corner ? this.$.status.classList.add('corner') :
                      this.$.status.classList.remove('corner');
      },
      updateColor: function() {
        var h = Math.round(120 - this.value * 120 / this.max); 
        this.$.status.style.backgroundColor = 'hsl(' + h + ', 100%, 50%)';  
      },
      valueChanged: function() {
        this.updateColor();
      },
      maxChanged: function() {
        this.updateColor();
      }
      /*widthChanged: function() {
         //this.$.status.style.width = this.width + 'px';
         //this.widthUnits ? this.corner ? '%': 'px';
      },*/
      /*heightChanged: function() {
        //this.$.status.style.height = this.height + 'px';
        this.heightUnits = this.corner ? '%': 'px';
      }*/
    });
  </script>
  </polymer-element>

Remove inline styles to speed up insertBefore issue
Remove inline styles to speed up insertBefore issue
