除了上一篇说到的创建自定义元素方法以外，还可以通过原生JS来创建，当你需要动态的创建元素时可以通过这种方式。
template.html
<link rel="import" href="../polymer-1.7.0/polymer.html">
<script>
MyElement = Polymer({
is: 'my-element',
created: function() {
this.textContent = 'My element!';
}
});
var el1 = document.createElement('my-element');
var el2 = new MyElement();
document.getElementById('box').appendChild(el2);
</script>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 这是一个基础版的兼容库 -->
<script src="webcomponents-lite.min.js"></script>
<!-- 将rel修改为import可以引入另外一个HTML，它将会被执行 -->
<link rel="import" href="./template/template.html">
</head>
<body>
<div id="box"></div>
</body>
</html>
created: function() {
``this.textContent = 'My element!';
}
当创建这个元素的时候，created会被执行，关于更多这方面的信息我们会在生命周期篇详细说明。
var el1 = document.createElement('my-element');
var el2 = new MyElement();
var el3 = new MyElement();
document.getElementById('box').appendChild(el2);
document.getElementById('box').appendChild(el3);
用new创建MyElement实例,createElement只是创建并不会被添加
如果在实例化的时候你想传递参数可以通过添加一个factoryImpl方法。
<script>
MyElement = Polymer({
is: 'my-element',
factoryImpl: function(foo, bar) {
this.textContent = 'Hello num is ' + foo + ' you ' + bar;
}
});
var e = document.createElement('my-element');
var el = new MyElement(42, 'octopus');
document.getElementById('box').appendChild(el);
</script>
当MyElement被实例化的时候factoryImpl会接受这些参数，并且执行。另外如果你想自定义方法，可以这样。
<script>
MyElement = Polymer({
is: 'my-element',
factoryImpl: function(foo, bar) {
this.textContent = 'Hello num is ' + foo + ' you ' + bar;
foo===42&&this.msg();
},
msg:function(){
alert('你好！');
}
});
var e = document.createElement('my-element');
var el = new MyElement(42, 'octopus');
document.getElementById('box').appendChild(el);
</script>
默认情况下msg是不会执行的，需要我们手动调用。
扩展原生HTML元素
template.html
<script>
Polymer({
is: 'my-input',
extends: 'input',
created: function() {
this.style.border = '1px solid red';
}
});
</script>
extends需要扩展的元素，created被创建的时候，通过js的createElement创建或者HTML添加都会执行这个方法。
index.html
<input is="my-input">
<input type="text">
在需要被扩展的元素上添加一个is属性。
以上是直接通过HTML的方式添加的，如果需要通过js来操作可以通过下面的方法。
template.html
<script>
MyInput = Polymer({
is: 'my-input',
extends: 'input',
created: function() {
this.style.border = '1px solid red';
}
});
var el1 = document.createElement('input','my-input');
document.body.appendChild(el1);
</script>
注意：目前只支持扩展input或button，其他元素或许以后会支持。
如果你想在页面加载完毕以后再执行可以这样写。
template.html
<link rel="import" href="../polymer-1.7.0/polymer.html">
<dom-module id="main-document-element">
<template>
<p>
Hi! I'm a Polymer element that was defined in the
main document!
</p>
</template>
</dom-module>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 这是一个基础版的兼容库 -->
<script src="webcomponents-lite.min.js"></script>
<!-- 将rel修改为import可以引入另外一个HTML，它将会被执行 -->
<link rel="import" href="./template/template.html">
</head>
<body>
<main-document-element></main-document-element>
<script>
HTMLImports.whenReady(function () {
console.log(1);
Polymer({
is: 'main-document-element'
});
});
console.log(0);
</script>
</body>
</html>
当文档中的所有输入都已完成加载时才会调用HTMLImports.whenReady函数。
整篇文章下来，发现创建元素时没有用new有时也可以，目前这个问题还得研究一下，后面再更新。
恭喜你看完了。