Undefined _polyfilled when using Google Polymer platform?

Question

I am trying to create a very simple example with Google Polymer's platform.js, but I get the following error: Uncaught TypeError: Cannot read property '_polyfilled' of undefined

Here is what I am trying to do:

<current-date></current-date>

<script>
    document.registerElement('current-date', {
        prototype: {
            createdCallback: function() {
                this.innerHTML = new Date();
            }
        }
    });
</script>

http://jsbin.com/uwUxeYA/1/edit

Note that this code works perfectly in Google Canary without platform.js loaded. Am I using the polyfill incorrectly for other browsers (latest Chrome, Firefox, etc)?

Answer 1

You're not creating the prototype correctly. In that form, it needs to be:

document.registerElement('current-date', {
   prototype: Object.create(HTMLElement.prototype, {
     createdCallback: {
       value: function() {
         this.innerHTML = new Date();
        }
     }
   })
 });

IMO, a much more legible form is:

var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
  this.innerHTML = new Date();
};
document.registerElement('current-date', {prototype: proto});

Working demo: http://jsbin.com/uwUxeYA/3/edit