Polymer.js

Web Components是非常新的技术，为了让老式浏览器也能使用，Google推出了一个函数库Polymer.js。这个库不仅可以帮助开发者，定义自己的网页元素，还提供许多预先制作好的组件，可以直接使用。

直接使用的组件

Polymer.js提供的组件，可以直接插入网页，比如下面的google-map。。

  2. <script src="components/platform/platform.js"></script>
  3. <link rel="import" href="google-map.html">
  4. <google-map lat="37.790" long="-122.390"></google-map>

再比如，在网页中插入一个时钟，可以直接使用下面的标签。

  2. <polymer-ui-clock></polymer-ui-clock>

自定义标签与其他标签的用法完全相同，也可以使用CSS指定它的样式。

  2. polymer-ui-clock {
  3.   width: 320px;
  4.   height: 320px;
  5.   display: inline-block;
  6.   background: url("../assets/glass.png") no-repeat;
  7.   background-size: cover;
  8.   border: 4px solid rgba(32, 32, 32, 0.3);
  9. }

安装

如果使用bower安装，至少需要安装platform和core components这两个核心部分。

  2. bower install --save Polymer/platform
  3. bower install --save Polymer/polymer

你还可以安装所有预先定义的界面组件。

  2. bower install Polymer/core-elements
  3. bower install Polymer/polymer-ui-elements

还可以只安装单个组件。

  2. bower install Polymer/polymer-ui-accordion

这时，组件根目录下的bower.json，会指明该组件的依赖的模块，这些模块会被自动安装。

  2. {
  3.   "name": "polymer-ui-accordion",
  4.   "private": true,
  5.   "dependencies": {
  6.     "polymer": "Polymer/polymer#0.2.0",
  7.     "polymer-selector": "Polymer/polymer-selector#0.2.0",
  8.     "polymer-ui-collapsible": "Polymer/polymer-ui-collapsible#0.2.0"
  9.   },
  10.   "version": "0.2.0"
  11. }

自定义组件

下面是一个最简单的自定义组件的例子。

  2. <link rel="import" href="../bower_components/polymer/polymer.html">
  4. <polymer-element name="lorem-element">
  5.   <template>
  6.     <p>Lorem ipsum</p>
  7.   </template>
  8. </polymer-element>

上面代码定义了lorem-element组件。它分成三个部分。

（1）import命令

import命令表示载入核心模块

（2）polymer-element标签

polymer-element标签定义了组件的名称（注意，组件名称中必须包含连字符）。它还可以使用extends属性，表示组件基于某种网页元素。

  2. <polymer-element name="w3c-disclosure" extends="button">

（3）template标签

template标签定义了网页元素的模板。

组件的使用方法

在调用组件的网页中，首先加载polymer.js库和组件文件。

  2. <script src="components/platform/platform.js"></script>
  3. <link rel="import" href="w3c-disclosure.html">

然后，分成两种情况。如果组件不基于任何现有的HTML网页元素（即定义的时候没有使用extends属性），则可以直接使用组件。

  2. <lorem-element></lorem-element>

这时网页上就会显示一行字“Lorem ipsum”。

如果组件是基于（extends）现有的网页元素，则必须在该种元素上使用is属性指定组件。

  2. <button is="w3c-disclosure">Expand section 1</button>