Extend HTML DOM Elements

Original: falafelsoftware/zmhx6/

by Anov Siradj

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.5.6/polymer.min.js"></script>
<img is="super-img" src="http://lorempixel.com/400/200/nature"
		caption="This is my custom caption!" />

JavaScript

(function () {
	//INHERIT FROM ROOT HTML ELEMENT
	var proto = Object.create(HTMLImageElement.prototype);

	//SUBSCRIBE TO LIFECYCLE EVENTS
	proto.createdCallback = function() {
		//GET ATTRIBUTE FROM ELEMENT
		var caption = this.getAttribute('caption');

		//ADD CAPTION UNDERNEATH IMAGE
		if (caption)
			this.insertAdjacentHTML('afterend', 
				'<div>' + caption + '</div>');
	};

	//REGISTER NEW CUSTOM ELEMENT
    document.registerElement('super-img', {
      prototype: proto,
          extends: 'img'
    });
})();