X-Tag是什麼?
X-Tag最初是由Mozilla開發的,現在由微軟的開發者支持,它是一個開源的JavaScript庫,它封裝了W3C標準Web組件家族的api,爲組件開發提供了一個緊湊的、功能豐富的接口。雖然X-Tag可以很容易地利用所有的Web組件API(自定義元素、影子DOM、模板和HTML導入),但是它只需要定製的元素API支持來操作。在沒有本地定製元素api的情況下,X-Tag使用了谷歌的聚合物框架所依賴的polyfill。您可以在構建部分查看我們的一攬子選項;
usage:
在這裏用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 啦. 就這麼簡單;