Polymer库提供了一套功能来创建自定义标签。这些功能设计能够简单、迅速地让自定义标签象标准DOM标签一样使用。类似标准DOM标签,Polymer标签能够:
- 使用构造函数或者
document.createElement
实例化; - 配置使用特性或属性;
- 在每个实例中填充内部DOM;
- 响应属性和特性的变化(例如,填充数据到DOM,或者触发事件);
- 内部默认样式或外部样式;
- 响应方法操作内部状态;
基本Polymer标签定义看上去像这样:
<dom-module id="element-name">
<template>
<style>
/* 你标签的CSS规则 */
</style>
<!-- 你标签的局部DOM-->
<div>{{greeting}}</div> <!-- 在局部DOM内的数据绑定-->
</template>
<script>
// 注册标签
Polymer({
is: "element-name",
// 在标签原型上添加属性和方法
properties: {
// 为标签的公共API声明属性
greeting: {
type: String,
value: "Hello!"
}
}
});
</script>
</dom-module>
这个指南将划分为以下几组功能: