Polymer-自定义元素

Polymer是一个用于构建Web组件的JavaScript库。该库的焦点是用于创建自定义元素的平台Web组件。

什么是自定义元素？

自定义元素是HTML元素的一种新类型，可以根据需要定义它们的行为和样式。

如何创建自定义元素？

使用Polymer创建自定义元素，只需要定义一个类，该类扩展自Polymer.Element。该类的属性和方法定义元素的行为和样式。

以下是一个简单的示例：

<dom-module id="my-element">
  <template>
    <h2>Hello World!</h2>
  </template>
  <script>
    class MyElement extends Polymer.Element {
      static get is() { return "my-element"; }
    }
    customElements.define(MyElement.is, MyElement);
  </script>
</dom-module>

在上面的示例中，<template> 标记定义了元素的显示内容，而 class 定义了元素的行为。is 属性指定了元素的标记名称。

Polymer应用程序的结构

Polymer应用程序由所谓的元素构成。每个元素都是自定义元素。

dom-module

Polymer应用程序的元素声明包含在 dom-module 文件中，如本例中所示。

<dom-module id="my-element">
  <!-- 元素声明-->
</dom-module>

模板

在dom-module中，<template> 标签定义了元素的内容。

<dom-module id="my-element">
  <template>
    <!-- 元素内容-->
  </template>
  <!-- 元素代码-->
</dom-module>

Polyfill

Web Components是Web技术，Web浏览器并不总是支持最新的标准。因此，Polymer提供了一个Polyfill，它使得Web Components能够在更多的Web浏览器上工作。

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.1.1/webcomponents-lite.min.js"></script>

引入元素

在Polymer应用程序中使用其他元素，可以使用HTML import 标记引入其他元素的dom-module声明。

<link rel="import" href="./my-element.html">

按钮元素示例

以下是一个按钮元素的示例：

<dom-module id="my-button">
  <template>
    <button on-click="onClick">{{text}}</button>
  </template>
  <script>
    class MyButton extends Polymer.Element {
      static get is() { return "my-button"; }
      static get properties() {
        return {
          text: {
            type: String,
            value: "Click Me!"
          }
        }
      }
      onClick() {
        alert("Button Clicked!");
      }
    }
    customElements.define(MyButton.is, MyButton);
  </script>
</dom-module>

在上面的示例中，onclick 事件处理程序在单击按钮时触发。按钮文本的值可以设置为元素属性的值。

参考资料

• Polymer Project官网
• HTML5Rocks-Polymer入门教程