在最近結束的 Google IO 2015，Google 發布了期待已久的 Polymer 1.0，并宣布可用于生產環境，使用 Polymer 庫的人們還在使用開發預覽版，本文將做為一個指南，指導將現在應用遷移到 Polymer最新版本。

關于 v1.0 一些重要的注意事項：

1. 它不兼容 version 0.5，上一個版本和存活至今的最老版本。 

2. 新版主要關注性能和效率，庫的總量大幅縮減。

3. 從底層徹底重建之后，開發人員可以使用它更容易更快地設計自定義元素，更像是標準的 DOM 元素。

4. 與上一個版本相比內部基準測試顯示 v1.0 在 Chrome 上快 3 倍，在 Safari 上快 4 倍。

安裝最新版本 Polymer 的步驟與這篇文章中的完全相同，如果想升級已安裝的 Polymer，定位到 Polymer 的目錄并在終端中運行下面的命令：

$ bower update

要知道非常重要的一點，這個操作會破壞現有的 Polymer 應用，就像之前提到的，兩個不同版本的 Polymer 是互不兼容的。因此，建議在一個單獨的目錄下安裝全新的 Polymer。為解釋自 v0.5 版本以來的變化，我們引用我之前寫在 SitePoint 上的文章里關于信用卡圖表自定義元素的例子來展示兩個版本間的不同。

Polyfilling 不支持瀏覽器

新版本的 Polymer 不再需要包含在 webcomponents.js 庫里面的 shadow DOM 的 polyfill，取而代之的是使用一個更小的叫 webcomponents-lite.js 的庫來 polyfill 舊的瀏覽器。

0.5版本：

<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

1.0版本

<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

這個"輕量級"的版本較之前的內容增加大約 80kb，當遇到性能瓶頸的時候這些改變將變得非常有意義。

定義自定義元素

<polymer-element>;標簽已被保存自定義元素規定的<dom-module>標簽所替換。自定義的元素現在由<dom-module>標簽的 id 屬性標識。自定義元素的規則仍然不變。

0.5版本：

<polymer-element name="credit-card">
  ...
</polymer-element>

1.0版本：

<dom-module id="credit-card">
  ...
</dom-module>

注冊自定義元素

在此之前，我們可以通過簡單的調用 Polymer()構造函數注冊自定義元素。如果<script>標簽在<polymer-element>標簽中，指定自定義元素名稱是可選的。在這個版本中，自定義元素現在可以在源碼中使用關鍵詞 is 來注冊。

0.5版本：

Polymer('credit-card', {});

1.0版本：

Polymer({
  is: 'credit-card'
});

is 的值必須與自定義元素的 <dom-module> 標簽的 id 屬性相匹配，這一點與以前的版本不同，它是不可選的。
<script>標簽可以被放在 <dom-module> 元素的內部或者外部，但 <dom-module> 元素的模板必須在調用 Polymer constructor 之前解析。

自定義元素屬性

任何屬于<polymer-element>標簽的現在都應該根據數據類型定義為 properties 對象。

版本0.5：

<polymer-element name='credit-card' attributes='amount'>

版本1.0：

Polymer({
  is: 'credit-card',
  properties: {
    amount: {
      type: Number
    }
  }

自定義元素樣式

現在元素樣式定義在<template>標簽外邊。

版本0.5:

<polymer-element name="credit-card" attributes="amount">
  <template>
    <style>
      ...
    </style>
  </template>
</polymer-element>

版本1.0：

<dom-module id="credit-card">
  <style>
    ...
  </style>
 
  <template>
    ...
  </template>
</dom-module>

外部樣式表支持使用 HTML Imports。

數據綁定

Polymer 1.0 版本提供了二種類型的數據綁定：

• 二對中括號創建一個單向綁定。數據流是向下的，宿主向子應用，并且綁定決不會修改宿主屬性。

• 二對大括號創建一個自動綁定，數據流是單向或者雙向的。取決于目標屬性配置是否為雙向綁定。

在這個 release 版本中，綁定必須替換一個結點的所有文本內容，或者某個屬性的所有值。所以是不支持字符串連結操作的。對于屬性值，建議使用計算綁定來代替字符串連結。

版本0.5：

<input type="submit" value="Donate {{amount}}">

版本1.0：

<template>
  <input type="submit" value="[[computeValue(amount)]]">
</template>

Polymer({
  is: "inline-compute",
  computeValue: function(amount) {
    return 'Donate ' + amount;
  }
});

注意一個結點中綁定標示兩側不能包含任意空白符。

新的 shady DOM

Polymer v0.5 使用 shadow DOM 給開發人員提供一個更簡單的元素接口，并通過隱藏子樹后面的影子根來抽象復雜性。這是最基本形式的封裝，它工作在瀏覽器中并提供 shadow DOM。

對于瀏覽器來說，它是不能提供 shadow DOM 的，像本地 shadow DOM 那樣實現一個多邊形填充是困難的，通常這會比本地實現慢，還會需要更多的代碼。正是這些原因， Polymer 團隊決定拿走 shadow DOM 填充，并用本地 DOM，用較輕版本構建來支持更小的 shadow DOM。

要注意的是 shady DOM 和 shadow DOM 是相互兼容的，這意味著 shady DOM 的 API 使用瀏覽器中有效的本地的shadow DOM，而在不支持的瀏覽器中就會回到 shady DOM。

總結

把你的應用升級到 Polymer v1.0 可能是一個痛苦緩慢過程，這取決于你的應用靈活性，但是這種升級會在更快的加載時間和更小的負載方面帶來巨大的好處。官方遷移向導是有效的，在 Polymer 項目網站上涵蓋了一大堆對內部 API 的改變，這些變更的層次很深，因此需要仔細檢查。 

另外，Chuck Horton 已經建立了一個 Github 倉庫，叫做 Road to Polymer 1.0，它提供了一個代碼轉換工具讓你的代碼從 v0.5 升級到 v1.0。如果你不想手動做一些更好的改變，它可以幫助你的代碼遷移。