Custom Elements

新しい型の HTML 要素を作る ことができる

HTML記述

<x-btn txt='テストボタン1' alert='TEST1'>
<x-btn txt='テストボタン2' alert='TEST2'>
						

JS記述

XbtnProto = Object.create(HTMLElement.prototype);
XbtnProto.createdCallback = function() {
	var self = this;
	var btn = document.createElement('button');
	btn.innerHTML = self.attributes.txt.nodeValue;
	btn.onclick = function() {
		alert(self.attributes.alert.nodeValue);
	};
	this.appendChild(btn);
};
var Xbtn = document.registerElement('x-btn', {
	prototype:XbtnProto
});
						

X-tag

Web Componentsの作成をサポートするライブラリ

JS記述

xtag.register('x-btn2', {
	// インスタンス生成時の処理などを設定
	lifecycle:{
		created: function() {
			var btn = document.createElement('button');
			btn.innerHTML = this.txt;
			this.appendChild(btn);
		}
	},
	// アクセサを設定
	accessors: {
		txt:{
			attribute:{}
		},
		alert:{
			attribute:{}
		}
	},
	// イベントを設定
	events:{
		'click:delegate(button)':function() {
			alert(this.parentElement.alert);
		}
	}
});
						

その他

コンポーネントをまとめたライブラリ

brick

polymer