Custom Elements

Custome Elements では標準タグとは別に<my-tag></my-tag>のような独自のタグを作成することができます。
独自のタグを定義するためにはdocument.registerElement()を使用します。

var MyTag = document.registerElement('my-tag');

Chrome以外のブラウザではまだまだ未実装なのでpolyfillを実装しておきましょう。

<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

命名規約

Custom Elements では標準タグと切り分けるために命名規約が存在します。
独自に作成したタグには必ず’-‘を含める必要があります。

OK

  • my-tag
  • my-original-tag

NG

  • mytag
  • my_tag
  • MyTag

とりあえず使ってみる

最初は単純に使ったタグを流し込んでみます。

  • javascript
var MyTag = document.registerElement('my-tag');
/* ↑ HTMLElementを継承したものと同じらしい
var MyTag = document.registerElement('my-tag', {
  prototype: Object.create(HTMLElement.prototype)
});
*/
var myTag = new MyTag();
myTag.innerHTML = "demo";
document.querySelector("#components").appendChild(myTag);
  • HTML
<div id="components"></div>
  • 実行結果

応用編

単純にタグを流し込むだけでは面白くないので独自のボタンを作ってみます。

  • javascript
var MyButtonProto = Object.create(HTMLButtonElement.prototype);
MyButtonProto.createdCallback = function () {
  this.innerHTML = "MyButton";
  this.addEventListener('click', function(e) {
    alert('click!');
  });
};
MyButton = document.registerElement('my-button', {prototype: MyButtonProto});
  • HTML
<my-button></my-button>
  • 実行結果

「MyButton」をクリックしてみてください。

まとめ

Custom Elements を使うことで要素の種類を明確化できます。
プログラムを作る際に特定のクラス名やカスタム属性を拾う必要もなくイベントの登録やスタイルの制御ができます。
また独自の属性も追加し放題なのでより柔軟に業務独自の処理が実装できると思います。

参考