<x-btn txt='テストボタン1' alert='TEST1'>
<x-btn txt='テストボタン2' alert='TEST2'>
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
});
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);
}
}
});