Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Creating a custom element with ShadowDOM
var UserBioProto = Object.create(HTMLElement.prototype);
UserBioProto.createdCallback = function(){
var root = this.createShadowRoot();
root.innerHTML = '<style>' +
' div { ' +
' box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); ' +
' width:300px;' +
' padding:10px;' +
'}'+
' img { ' +
' width:30px;' +
' height:30px;' +
' float:left;' +
' text-align:left;' +
' margin-top:10px;' +
' margin-right:10px;' +
'}'+
' p { ' +
' padding-bottom:0px;' +
'}'+
' .name-tag { ' +
' font-weight:bold;' +
' color:#ee6e73;' +
'}'+
'</style>' +
'<div><img src="img/sauron.jpg"></img> <p><span class="name-tag"> Sauron </span> - The Necromancer </p></div>';
};
var userBio = document.registerElement('user-bio',{
prototype:UserBioProto
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment