Polymer

Polymerのパブリックな開発は、2013年11月14日のPromises Polyfill（英語版）のリリースとともに始まった。その後、Polymerの開発は、Material Designを元にしたビジュアルスタイルガイドラインをカバーするウェブデザインライブラリ、データバインディングの機能、そして、"Core"と"Paper"と呼ばれるWebコンポーネントライブラリへと少しずつ成長していった。

Coreコンポーネントは、もともと多数のウェブサイトに必要とされる汎用的な機能を包括することを意図して作られたものであった。一方、Paperコンポーネントは、よりMaterial Designのコンセプトに特化したコンポーネントを提供するために作られた。主要なマイルストーンがバージョン0.5のリリースで達成されたため、このバージョンが、アーリーアダプターのユーザーがプロジェクトに利用可能な最初のバージョンであるとされた^[10]。

Googleは、バージョン0.5以降もPolymerの設計の改良を継続的に行い、特に、多くの開発者が指摘したパフォーマンスの問題を改善していった。2015年のPolymer1.0のリリースにより、問題の多くが解決され、このバージョンをもって、ライブラリ最初の「production ready」なバージョンであるとされた^[11]。 バージョン1.0では、Polymerのパフォーマンスは大幅に向上し、ロードタイムは最大7倍高速化した^[12]。また、バージョン1.0からは、GoogleはPolymerプロジェクトの要素を明確に分かれた2つのコンポーネントに分離し、エレメントカタログとWebコンポーネントの糖衣化を行う（webcomponents-sugaring）ライブラリに分けた。

2015年9月14-15日、GoogleはアムステルダムでPolymer Summit^[13]を開催した。

2016年10月17-18日、GoogleはロンドンでPolymer Summit^[14]を開催した。

2017年8月22-23日、GoogleはコペンハーゲンでPolymer Summit^[15]を開催した。

2018年5月2日、Polymerチームは、今後、Polymerの双方向バインディングとテンプレートシステムの開発は終了し、LitElement^[16]（もともとPolymerに含まれている^[17]）および1方向バインディングのみにフォーカスしてゆくことになる、という方針を発表した^[18]。

Polymerは、バニラなWebコンポーネントに対して、数多くの機能を提供している。

• カスタムエレメントを簡単な方法で作成する機能
• 1方向及び双方向のデータバインディングの機能
• 計算済み（computed）プロパティ
• 条件付きあるいは繰り返しテンプレート
• ジェスチャーイベント

Polymerは、構造的な設計プロセスに特別な注意が払われており、相互運用性が高い「レゴブロック」構造として活用することができるため、市場で大きな注目を集めつつある^{[19][いつ?]}。

カスタムエレメントは、ESモジュールとクラスを使用して作成することができる。カスタムエレメントの定義には、CSSスタイル、HTMLテンプレートエレメントの内部にローカルに展開されるDOM、エレメントのプロパティ、ライフサイクル・コールバック、そして、JavaScriptのメソッドが含まれる。

import {PolymerElement, html} from '@polymer/polymer/polymer-element.js'

class HelloElement extends PolymerElement {
  
static get template() { return html`
    <style>
      /* Local DOM CSS style */
    </style>
    <!-- Local DOM -->
    Hello {{name}}!    
`; }
  
static get is() { return 'hello-element'; }
static get properties() {
   return {
      name: {
        type: String
       }
      /* Element properties */
   }
}
/* Custom methods */
}
window.customElements.define(HelloElement.is, HelloElement);

上記のように定義したエレメントは、HTMLコード内で次のように使用することができる。

<hello-element name="World"></hello-element>

• Vue.js
• AngularJS
• React