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

前言

已經很久沒有更新Polymer專欄，以前幾個月因爲受到工做上的忽然變故，致使學習和撰寫沒法順利開展，好在目前各方面都已經暫時穩定下來，期間有很多對Polymer感興趣的壇友經過評論或者私信的形式向我表達了不要斷更的指望，我在這裏也想對他們說聲謝謝。

今天咱們繼續Polymer的樣式篇，剛剛在新機器下部署好了Polymer的開發環境，發現時隔2個月Polymer已然悄悄升級到了1.3版本（雖然我還沒去了解新版本的變動），這也說明了Google對這個框架的重視程度，給咱們學習Polymer的朋友們打了一針強心劑。（建議你們在閱讀本文前執行bower update命令來更新Polymer到最新版）

正題

跨做用域的樣式

背景

對於Webcomponent而言，Shadow Dom 帶來了不少做用域以及樣式封裝之類的好處，使得組件在CSS影響範圍上變得更加安全和簡單。樣式不會被上層的組件介入影響，更不會被內層組件影響。

這對保護樣式不受未知的，不可控的外界因素所幹擾很是有用。可是當你想要刻意去修改一個自定義組件的樣式時該怎麼辦？咱們常常要面臨這個問題，好比在某個固定的主題（theme）下作一些針對某些組件的特殊的樣式修改。舉個例子，「custom-checkbox」組件使用 .checked這個class，而另一個component也碰巧使用了.checked 這個class的時候Polymer提供的Shadow Style功能就很好的解決了同名class相互影響，相互污染的問題。

爲了解決污染的問題傳統的作法每每是，給css定義加上不少前綴，以前加上不少dom層級的定義（相似於namespace）來區分重名的class，而有了Shadow Style以後，媽媽就不再擔憂class重名了。

自定義CSS屬性（或者稱爲變量更加合適）

咱們先來看一段代碼，定義一個component

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

咱們能夠看到span上的className爲title,而titile的定義裏出現了奇怪的東西var (xxxxxx)

.title{
    color: var(--my-toolbar-title-color);
}

咱們望文生義一下，從字面上理解這個color應該是個動態的值，具體顏色必定是由外部使用這個component的父component來決定的，而--my-toolbar-title-color應該就是一個變量名，存放外部傳入的具體顏色值。
接下去咱們再定義一個父component來使用這個my-toolbar

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="my-toolbar.html">
<dom-module id="my-element">
    <style>
        :host{
            --my-toolbar-title-color: green;
        }

        .warning{
            --my-toolbar-title-color:red;
        }
    </style>
    <template>
        <my-toolbar title="This one is green."></my-toolbar>
        <my-toolbar title="This one is green too."></my-toolbar>
        <my-toolbar class="warning" title="This one is red."></my-toolbar>
    </template>
    <script>
        Polymer({
            is: 'my-element'
        });
    </script>
</dom-module>

運行結果一目瞭然，my-toolbar這個component中定義的css變量能夠被外部使用它的my-element這個父component賦值。形式上感受就是--my-toolbar-title-color這個自定義的變量稱爲一個新的css屬性，能夠被賦值（正如咱們小標題上的稱呼—— 自定義css屬性）。

固然你也能夠給var --my-toobar-title-color一個默認的初始值，以防外界沒有給它賦值，如

color: var(--my-toolbar-title-color, blue);

這種自定義css屬性，對於擴展咱們傳統的樣式十分有幫助，尤爲是切換不一樣配色的主題時，目前Firefox已經原生支持這種寫法，chrome和safari也已經宣稱要支持這一特性，鼓掌！

自定義CSS代碼塊

瞭解過sass的朋友應該對@mixin不陌生，polymer也提供了整塊整塊定義css樣式的功能，先看代碼，咱們對以前的my-toolbar的代碼稍做改動，使用@apply來聲明瞭2個變量接收mixin的樣式塊。

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

以後對my-element也作一下修改

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="my-toolbar.html">
<dom-module id="my-element">
    <style>
        /* Apply custom theme to toolbars */
      :host {
        --my-toolbar-theme: {
          background-color: yellow;
          border-radius: 4px;
          border: 1px solid gray;
        };
        --my-toolbar-title-theme: {
          color: green;
        };
      }

      /* Make only toolbars with the .warning class red and bold */
      .warning {
        --my-toolbar-title-theme: {
          color: red;
          font-weight: bold;
        };
      }
    </style>
    <template>
        <my-toolbar title="This one is green."></my-toolbar>
        <my-toolbar title="This one is green too."></my-toolbar>
        <my-toolbar class="warning" title="This one is red."></my-toolbar>
    </template>
    <script>
        Polymer({
            is: 'my-element'
        });
    </script>
</dom-module>

運行結果

咱們能夠看到@apply和以前的var做用實際上是相似的，只不過@apply定義的變量接收的是由多條style規則組成的塊。

好了，夜已深，可能講完整個style章節須要總共4-5個小節，今天第2小節就講到到這裏吧，我儘可能抽時間寫完。