如何学习polymer 自定义元素
最近在学习polymer ，我根据自己的所学给大家写了一篇polymer 学习教程。我们结合实例讲解，下面手动来创建一个干净的项目。
1、cd nodejs
2、mkdir polymer-demo1
3、cd polymer-demo1
4、bower init (一路回车)
5、echo>.bowerrc
{ "directory": "bower_components"}
打开“.bowerrc”文件增加bower安装组件路径
6、bower install -save polymer
7、根目录创建index.html文件
<!DOCTYPE html><html><head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<meta charset="UTF-8">
<title>Document</title>
<link rel="import" href="my-elem.html"></head><body>
<my-elem></my-elem></body></html>
8、自定义一个polymer元素my-elem.html
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="my-elem">
<template>
<h3>my elem test</h3>
</template>
<script>
Polymer({
is: "my-elem",
});
</script></dom-module>
9、安装 polyserve
npm install -g polyserve
安装完，启动服务
polyserve
10、访问
http://localhost:8080/
第一个简单的polymer自定义元素完成！
11、为元素增加、样式、属性、监听事件
<link rel="import" href="bower_components/polymer/polymer.html"><dom-module id="my-elem">
<template>
<style>
:host {display: block;}
h3 {color: red;}
h3>span {color: blue;}
</style>
<h3>my <span>elem</span> test</h3>
<p>{{text}}</p>
</template>
<script>
Polymer({
is: "my-elem",
properties: {
text: {
type: String,
value: 'default value'
}
},
listeners: {
'tap': 'click'
},
click: function() {
this.text = "click!";
},
});
</script></dom-module>
<!DOCTYPE html><html><head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<meta charset="UTF-8">
<title>Document</title>
<link rel="import" href="my-elem.html"></head><body>
<h3>hello</h3>
<my-elem text='12345689'></my-elem>
<my-elem></my-elem></body></html>
样式定义放在 template 标签里面
：host 就是当前模块 #my-elem
原文来自：开源中国