Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>Custom Element</title>
<!-- CE polyfill -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/0.2.1/document-register-element.js"></script>
<hello-el data-text="Chris"></hello-el>
 
hello-el {
  display:block;
    font-weight:bold;
    font-family:sans-serif;
    color:#359;
}
 
(function() {
    var helloProto = Object.create(HTMLElement.prototype);
    
    helloProto.createdCallback = function() {
        var val = this.getAttribute('data-text') || 'stranger';
        // uppercase the text - exposes some issues
        val = val.toUpperCase();
        
        this.innerHTML = 'Hello, ' + val + '.';
    };
    
    document.registerElement('hello-el', {
        prototype: helloProto
    });
})();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x