開坑，寫點Polymer 1.1 教程第6篇——樣式（3）

一些和自定義css屬性有關的API
上篇中咱們介紹瞭如何自定義css變量，從而在外部定義一些具體的值，由外部component傳入子component後動態的改變，子component的樣式。可是這一切都是聲明式的也就是說在運行前這些樣式就已經決定了，若是你須要在運行時動態的改變一些自定義屬性定義的樣式，那你就要使用一些polymer提供的API了。

customStyle和updateStyles

下面來看一個例子
仍是把my-toolbar改回來，不用@mixin 仍是用var(--my-toolbar-title-color)

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="my-toolbar">
    <template>
        <style>
            :host {
                padding: 4px;
                background-color: gray;
            }
            .title {
                color: var(--my-toolbar-title-color);
            }
        </style>
        <span class="title">{{title}}</span>
    </template>
    <script>
        Polymer({
            is: 'my-toolbar',
            properties: {
                title: String
            }
        });
    </script>
</dom-module>

接下去建立一個父component x-custom

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="my-toolbar.html">
<dom-module id="x-custom">
  <template>
    <style>
      :host {
        --my-toolbar-title-color: red;
      }
    </style>
    <my-toolbar title="My awesome app"></my-toolbar>
    <button on-tap="changeTheme">Change theme</button>
  </template>
  <script>
    Polymer({
      is: 'x-custom',
      changeTheme: function() {
        this.customStyle['--my-toolbar-title-color'] = 'blue';
        this.updateStyles();
      }
    });
  </script>
</dom-module>

來看幾行關鍵代碼

<style>
  :host {
    --my-toolbar-title-color: red;
  }
</style>

這個style上上一篇的外部定義變量無異，給一個初始的文字顏色red。

<script>
    Polymer({
      is: 'x-custom',
      changeTheme: function() {
        this.customStyle['--my-toolbar-title-color'] = 'blue';
        this.updateStyles();
      }
    });
</script>

這裏咱們給button添加了一個點擊事件，當用戶點擊button時，執行changeTheme的方法，方法裏作了2件事情。

1. 修改customStyle屬性中的變量 --my-toolbar-title-color 爲 blue

2. 調用updateStyles()方法來刷新視圖

Run一下，看下效果，初始時文字爲red

點擊後，文字變成blue，達到目的

爲毛要有這2個API呢，爲毛polymer不能自動更新視圖呢。官方給出的解釋是考慮到性能問題。

不過我測試了一下,有一種case是不須要手動updateStyles()的，
好比，下列代碼中，我點擊按鈕動態添加一個class b的dom節點，本來事先在style中定義好的css x-foo.b會馬上生效，並不須要手動刷新。

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="x-foo.html">
<dom-module id="x-custom2">
    <style>
            /* applies */
        x-foo.a {
          --foo: brown;
        }
        /* does not apply */
        x-foo.b {
          --foo: orange;
        }
    </style>
    <template>
        <div id="container">
            <x-foo class="a"></x-foo>
        </div>
        <button on-tap="addClass">add class b</button>
    </template>
    <script>
        Polymer({
            is: 'x-custom2',
            addClass:function(){
                var xfoo = document.createElement('x-foo');
                xfoo.classList.add('b');
                Polymer.dom(this.$.container).appendChild(xfoo);
            }
        });
    </script>
</dom-module>

爲嘛會這樣呢，動態添加dom就不須要手動刷新，而動態設置自定義css屬性就須要updateStyles(),我猜想可能的緣由是
若是用戶同時設置多個自定義css屬性，好比

this.customStyle['--my-toolbar-title-color'] = 'blue';
this.customStyle['--my-toolbar-title-color2'] = 'red';
this.customStyle['--my-toolbar-title-color3'] = 'green';

這樣若是讓Polymer自動去刷新視圖可能就要執行3次render，用戶手動本身在最後一次性刷新的話能提高必定的性能。

本篇未完待續...