クロスブラウザでカスタムタグを定義できる x-tag というライブラリが話題だったので試してみました。
インストール
xtag は npm で簡単にインストールできます。ほかにビルド用の Browserify と babelify もインストールしておきます。
$ npm install -g browserify
$ npm install -D babelify babel-preset-es2015
$ npm install -S x-tagHello, World!
まずは Hello World から。
import xtag from 'x-tag';
xtag.register('x-hello', {
content: 'Hello, <strong>World</strong>!'
});xtag.register はカスタムタグを登録するメソッドです。タグの名前と情報を渡します。 content に書かれた HTML がカスタム要素の中に展開されます。
$ browserify -t babelify -o bundle.js a.jsHTML からこの JavaScript を読み込み <x-hello> タグを書き込めば Hello, World! と表示されます。
<!DOCTYPE html>
<meta charset="utf-8">
<script src="bundle.js"></script>
<x-hello></x-hello>ちなみに <x-hello /> のように書くと子要素に関する挙動がおかしくなるようです。
ライフサイクルとかメソッドとか
もう少し複雑な例を試してみます。 jQuery とも特に問題なく組み合わせられるので使ってみます。
import xtag from 'x-tag';
import $ from 'jquery';
xtag.register('x-clock', {
content: `<span class="time"></span>`,
lifecycle: {
created() {
this.update();
setInterval(this.update.bind(this), 1000);
}
},
methods: {
update() {
const time = new Date().toLocaleTimeString();
$(this).find('.time').text(time);
}
}
});この <x-clock> タグを使用すると現在時刻が表示されます。
lifecycle は要素が作成、挿入、削除などされた時に呼び出されるメソッドを指定します。 created は文字通りタグが作成された時に呼び出されます。
methods はタグのメソッドを指定します。ここに指定したメソッドは外部からも触ることができます。この例だと document.querySelector('x-clock').update() のように使うことが可能です。
おわりに
軽く x-tag を試してみました。他にも DOM にプロパティを生やしたりイベントを監視したりもできるようです。
Polymer や Angular の用にごてごてしていないので気軽に使えそうです。 jQuery とも組み合わせられるので既存の jQuery プラグインなんかをカスタムタグにしたりがやりやすいかもしれません。
反面、複雑な機能はないのである程度の規模なら最初から他のフレームワークなどを使っておくのが良さそうです。