Template example

HTML

<script src="//rawgithub.com/satazor/SparkMD5/master/spark-md5.js"></script>
<template id="myGravatarTemplate">
    <img>
</template>
<my-gravatar email="albert.einstein.starcounter@gmail.com"></my-gravatar>

JavaScript

function updateImg(img, email) {
    img.setAttribute("src", "//www.gravatar.com/avatar/" + SparkMD5.hash(email));
}

var MyGravatarElementPrototype = Object.create(HTMLElement.prototype);
MyGravatarElementPrototype.attributeChangedCallback = function (attributeName, oldVal, newVal) {
    if (attributeName == "email") {
        updateImg(this.shadowRoot.querySelector('img'), newVal);
    }
};
MyGravatarElementPrototype.createdCallback = function () {
    var t = document.querySelector('#myGravatarTemplate');
    var clone = document.importNode(t.content, true);
    updateImg(clone.querySelector('img'), this.getAttribute("email") || "");
    this.createShadowRoot().appendChild(clone);
};

var MyGravatarElement = document.registerElement('my-gravatar', {
    prototype: MyGravatarElementPrototype
});

//this also works!
var avatar = new MyGravatarElement();
avatar.setAttribute("email", "albert.einstein.starcounter@gmail.com");
document.body.appendChild(avatar);