Why can't I create my own custom component in Google Chrome 48?

I have built a library of custom elements using the webcomponents polyfills provided by Polymer. It works in Firefox and Safari. But it doesn't work in Chrome 48 with native component support. I can make it work if I use the polyfill code hacked to not use the native implementation...

Here is an example:

<!DOCTYPE html>
<html>
<head>
  <script>
    var myComp = Object.create(HTMLElement.prototype);
    document.registerElement('my-comp', {prototype: myComp}); 
    myComp.attachedCallback = function () {
      console.log('my-comp attached');
    }
  </script>

</head>
  <body>
   <my-comp></my-comp>
   <p> Just to check that page is loaded</p>
</body>
</html>

I should see the message in the console, but nothing is displayed. Support is enabled in Chrome (I can see that document.registerElement is native), my code is loaded and executed (the element is registered, I get a warning if I try to register it again in the console), and the callback is valid (I can call it by hand in the console).

What happens? How can I make it work?

Solution

You will make it work by attaching event handlers before registering element:

var myComp = Object.create(HTMLElement.prototype);
myComp.attachedCallback = function () 
{
  console.log('my-comp attached');
}
document.registerElement('my-comp', {prototype: myComp});