Custom Elements

Custom Elementsの動作サンプルです。500ms間隔で、opacityを0と1で切り替えて明滅する要素です。

Source


  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);
  

Sample