JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<developer-type>
    <photo username="chdhmphry" service="twitter"></photo>
    <name>Chad Humphrey</name>
    <about>Chad is a developer from Orlando, Fl. He specializes in Front End Development.</about>
</developer-type>

SCSS

.developer-module{
    &{
        display: block;
        font-family: sans-serif;
        margin: 40px;
    }
    .photo{
        display: block;
        border-radius: 100%;
        border: 1px solid #aaa;
        margin: 0 auto;
    }
    .name{
        display: block;
        max-width: 300px;
        margin: 20px auto 10px;
        text-align: center;
    }
    .about{
        display: block;
        max-width: 300px;
        margin: 10px auto;
        text-align: center;
    }
    
}

JavaScript

var DeveloperPoly = Object.create(HTMLElement.prototype);
DeveloperPoly.createdCallback = function() {
    var developer = this,
        childElements = this.children,
        newDeveloper = document.createDocumentFragment();
    
    for(var i = 0, x = childElements.length; i < x; i++){
        var element = childElements[i];
        switch(element.tagName.toLowerCase()){
            case "photo":
                getPhoto(element);
                break;
            case "name":
                getName(element);
                break;
            case "about":
                getAbout(element);
                break;
        }
        if(element.tagName.toLowerCase() == "photo"){
        }
    }
    
    developer.innerHTML = "";
    developer.classList.add("developer-module");
    developer.appendChild(newDeveloper);
    developer.classList.add("module-ready");
    
    function getPhoto(element){  
        var username = element.getAttribute('username'),
            service = element.getAttribute('service'),
            url = 'http://avatars.io/' + service + '/' + username,
            img = document.createElement( 'img' );
        
        img.setAttribute('src', url);
        img.classList.add("photo");
        newDeveloper.appendChild(img);
    }
    function getName(element){
        var name = element.innerHTML,
            h1 = document.createElement("h1");
        
        h1.innerHTML = name;
        h1.classList.add("name");
        newDeveloper.appendChild(h1);
    }
    function getAbout(element){
        var about = element.innerHTML,
            p = document.createElement("p");
        
        p.innerHTML = about;
        p.classList.add("about");
        newDeveloper.appendChild(p);
    }
};
document.registerElement('developer-type', {
    prototype: DeveloperPoly
});