博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端组件化Polymer入门教程(4)——自定义元素
阅读量:6190 次
发布时间:2019-06-21

本文共 1142 字,大约阅读时间需要 3 分钟。

除了上一篇说到的创建自定义元素方法以外,还可以通过原生JS来创建,当你需要动态的创建元素时可以通过这种方式。

template.html

index.html

    
Document

857662-20160929170457094-1647516469.png

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只是创建并不会被添加

857662-20160929161133563-1781471908.png

如果在实例化的时候你想传递参数可以通过添加一个factoryImpl方法。

857662-20160929163215516-442786749.png

当MyElement被实例化的时候factoryImpl会接受这些参数,并且执行。另外如果你想自定义方法,可以这样。

857662-20160929163434641-771763395.png

默认情况下msg是不会执行的,需要我们手动调用。

扩展原生HTML元素

template.html

extends需要扩展的元素,created被创建的时候,通过js的createElement创建或者HTML添加都会执行这个方法。

index.html

在需要被扩展的元素上添加一个is属性。

857662-20160929164229110-2099941113.png

以上是直接通过HTML的方式添加的,如果需要通过js来操作可以通过下面的方法。

template.html

857662-20160929165135797-467767422.png

注意:目前只支持扩展input或button,其他元素或许以后会支持。

如果你想在页面加载完毕以后再执行可以这样写。

template.html

index.html

    
Document

当文档中的所有输入都已完成加载时才会调用HTMLImports.whenReady函数。

整篇文章下来,发现创建元素时没有用new有时也可以,目前这个问题还得研究一下,后面再更新。

恭喜你看完了。

转载地址:http://ybrda.baihongyu.com/

你可能感兴趣的文章
Python 内置彩蛋
查看>>
SQLServer 之 常用函数及查看
查看>>
FrameWork中SQLServer数据源使用宏函数出错解决办法
查看>>
如何在plSql查询数据查出的数据可编辑
查看>>
2015年第11本:代码整洁之道Clean Code
查看>>
PHP 错误与异常 笔记与总结(11 )register_shutdown_function() 函数的使用
查看>>
talend 将hbase中数据导入到mysql中
查看>>
内置在虚拟机上64位操作系统:该主机支持 Intel VT-x,但 Intel VT-x 残
查看>>
Material Design练习
查看>>
[译] 二、开始iOS编程之前,你还需要做什么?
查看>>
计算机视觉怎么给图像分类?KNN、SVM、BP神经网络、CNN、迁移学习供你选(附开源代码)...
查看>>
大数据造车,未来之势还是噱头之谈?
查看>>
新疆石油勘探领域Bladmin存储系统应用案例
查看>>
风险与机遇并存的移动互联网, 谁来保护你的安全
查看>>
【短视频SDK】合成时长和文件大小对比数据---给参数设置提供参考.
查看>>
软件开发!=软件工程 你真的希望如此吗?
查看>>
回应假新闻批评:Facebook新规控制内容发布
查看>>
第八届中国云计算大会寻找双创明星:云计算大数据创新创业评选正式启动
查看>>
超级安卓漏洞 “寄生兽”影响数千万手机应用
查看>>
浪潮存储:战略方向对,软件定义存储才能发挥最大作用
查看>>