除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式。
template.html
index.html
Document
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方法。
当MyElement被实例化的时候factoryImpl会接受这些参数,并且执行。另外如果你想自定义方法,可以这样。
默认情况下msg是不会执行的,需要我们手动调用。
扩展原生HTML元素
template.html
extends需要扩展的元素,created被创建的时候,通过js的createElement创建或者HTML添加都会执行这个方法。
index.html
在需要被扩展的元素上添加一个is属性。
以上是直接通过HTML的方式添加的,如果需要通过js来操作可以通过下面的方法。
template.html
注意:目前只支持扩展input或button,其他元素或许以后会支持。
如果你想在页面加载完毕以后再执行可以这样写。
template.html
Hi! I'm a Polymer element that was defined in the main document!
index.html
Document
当文档中的所有输入都已完成加载时才会调用HTMLImports.whenReady函数。
整篇文章下来,发现创建元素时没有用new有时也可以,目前这个问题还得研究一下,后面再更新。
恭喜你看完了。