HTML高阶实例之自定义元素

最新更新时间：2018年3月27日18:07:55

《猛戳-查看我的博客地图-总有你意想不到的惊喜》

本文内容：自定义元素

创建自定义元素的意义：可以在元素定义中加入属性和方法，给元素绑定特定的功能。可以对该元素创建公开 API 。

自定义元素的生命周期方法

事件名称	简要描述
createdCallback	创建元素实例
attachedCallback	向文档插入实例
detachedCallback	从文档中移除实例
attributeChangedCallback(attrName, oldVal, newVal)	添加，移除，或修改一个属性

实例代码入下

document.registerElement('custom-video', {prototype: CVideoProto});//registerElement创建的元素名称必须包含-短横线，否则报错，创建失败
let CVideoProto = Object.create(HTMLVideoElement.prototype,{
	name:{//添加方法
		value:function(){
			alert('this tag is custom video');
		}
	},
	do:{//添加属性
		get:function(){return 1;}
	}
});
//生命周期方法
CVideoProto.createdCallback = function() {
	this.addEventListener('click', function(e) {
		console.log('Thanks!');
	});
	//this.innerHTML = '这是一个自定义的video元素';
};
//使用
let cvideo = document.createElement('custom-video');//实例化另一种方法let Qvideo = new Qvideo();
document.body.appendChild(cvideo);
cvideo.setAttribute("style","display:block;");//默认是inline-block
cvideo.name();
console.log(cvideo.do);

感谢阅读，欢迎评论^-^

打赏我吧^-^