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>
<button onclick="attrChange();">Change It</button>
 
hello-el {
  display:block;
    font-weight:bold;
    font-family:sans-serif;
    color:#359;
}
 
(function() {
    var helloProto = Object.create(HTMLElement.prototype);
    
    helloProto.createdCallback = function() {
        this._setText(this.getAttribute('data-text'));
    };
    
    helloProto.attributeChangedCallback = function(name, oldVal, newVal) {
        if (name === 'data-text') {
            this._setText(newVal);
        }
    };
    
    helloProto._setText = function(val) {
        val = val || 'stranger';
        // uppercase the text - exposes some issues
        val = val.toUpperCase();
        
        this.innerHTML = 'Hello, ' + val + '.';
    };
    
    
    document.registerElement('hello-el', {
        prototype: helloProto
    });
})();
function attrChange() {
    var helloEl = document.querySelector('hello-el');
    helloEl.setAttribute('data-text', Math.floor(Math.random() * 100));
}
Output

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

Dismiss x