(re-)introducing the BLINK tag!

by Andrew Holloway

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents.min.js"></script>
<p>
YOU SHOULD CODE LIKE <ah-blink>IT'S 1997!</ah-blink> YEAH!
</p>

<p>
<strong>TODO</strong>: incorporate shadow DOM for encapsulating visibility propery <a href="https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/">here</a>
</p>

CSS

ah-blink {
  background-color: red;
}

JavaScript

// Let's bring sexy back! here's a blink tag with customizable blink speed

var BlinkoProto = Object.create(HTMLElement.prototype);

BlinkoProto._speed = 1000;
BlinkoProto._isVisible = true;

BlinkoProto.createdCallback = function() {
  var shadowDom = this.createShadowRoot();
  shadowDom.innerHTML = this.innerHTML;
};

BlinkoProto.attachedCallback = function() {
  var value = this.getAttribute('speed');
  if (value) {
    this._speed = value;
  }
  this._updateRendering();
};

BlinkoProto.attributeChangedCallback = function(name, oldValue, newValue) {
  alert('change value' + name + ' ' + newValue);
  if (name === 'speed') {
    this._speed = newValue;
    this._updateRendering();
  }
};

BlinkoProto._updateRendering = function() {
  clearInterval(this._interval);
  var self = this;
  this._interval = setInterval(function() {
    this.style.visibility = (this._isVisible ? 'hidden' : '');
    this._isVisible = !this._isVisible;
  }.bind(this), this._speed);
};

var Blinko = document.registerElement('ah-blink', {
  prototype: BlinkoProto
});