Custom Elementsの動作サンプルです。500ms間隔で、opacityを0と1で切り替えて明滅する要素です。
var proto = Object.create(HTMLSpanElement.prototype);
proto.attachedCallback = function() {
var self = this;
this.timer = setInterval(function() {
self.style.opacity = self.style.opacity|0 ? 0 : 1;
}, 500);
};
proto.detachedCallback = function() {
clearTimeout(this.timer);
};
document.registerElement('x-blink', {
extends:'span',
prototype: proto
});
// 拡張した要素をbodyに追加
var elmStr = '<span is="x-blink">ピカピカ</span>';
document.body.innerHTML += elmStr;
// または
var xblink = document.createElement('span', 'x-blink');
xblink.textContent = 'ピカピカ';
document.body.appendChild(xblink);