X-Tag最初是由Mozilla开发的,现在由微软的开发者支持,它是一个开源的JavaScript库,它封装了W3C标准Web组件家族的api,为组件开发提供了一个紧凑的、功能丰富的接口。虽然X-Tag可以很容易地利用所有的Web组件API(自定义元素、影子DOM、模板和HTML导入),但是它只需要定制的元素API支持来操作。在没有本地定制元素api的情况下,X-Tag使用了谷歌的聚合物框架所依赖的polyfill。您可以在构建部分查看我们的一揽子选项;
在这里用1.5版本的demo.简单介绍下使用方法;
//html
<body>
<x-clock></x-clock>
</body>
<script src="https://cdn.bootcss.com/x-tag/1.5.11/x-tag-core.js"></script>
<script src="index.js"></script>
//index.js
xtag.create('x-clock', class extends XTagElement {
connectedCallback () {
this.start();
}
start (){
this.update();
this._interval = setInterval(() => this.update(), 1000);
}
stop (){
this._interval = clearInterval(this._data.interval);
}
update (){
this.textContent = new Date().toLocaleTimeString();
}
'tap::event' (){
if (this._interval) this.stop();
else this.start();
}
});
ok 啦. 就这么简单;