Extending native Custom Element

HTML

<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>
<!-- extend via Polymer -->  
<polymer-element name="my-list" extends="ul">
<template>
    Extended native element by Polymer {{works}}
    <ul>
        <content></content>
    </ul>
</template>
<script>
Polymer('my-list', {works: 'Works!'});
</script>
</polymer-element>
<polymer-element name="super-list" extends="my-list" >
<template>
    Extended polymer-element {{works}}
    <ul>
        <content></content>
    </ul>
</template>
<script>
Polymer('super-list');
</script>
</polymer-element>
    
<ul is="my-list">
    <li>First child</li>
    <li>Second child</li>
</ul>
<hr/>
<ul is="super-list">
    <li>First child</li>
    <li>Second child</li>
</ul>
<hr/>

<!-- extend via native JS -->  
<script>
  (function (scope) {
    var MyNativeList = Object.create( HTMLUListElement.prototype);
    MyNativeList.works = "Works!";
    MyNativeList.attachedCallback = function () {
        var s = this.createShadowRoot();
        s.innerHTML = "Extended native element by native JS "+this.works+"<ul><content></content></ul>";
    }
    document.register('my-n-list', {
      prototype: MyNativeList,
      extends: "ul"
    });
   }(window));
</script>

<polymer-element name="super-n-list" extends="my-n-list" >
<template>
    Extended native custom element {{works}}
    <ul id="container">
        <shadow></shadow>
    </ul>
</template>
</polymer-element>

<script>
document.setTimeout(function() {
Polymer('super-n-list',{
    ready: function(){
        console.log("I'm not going to be executed :(");
    }
    });
}, 500);
</script>
    
<ul is="my-n-list">
    <li>First child</li>
    <li>Second child</li>
</ul>
<hr/>
<h3>Here is problematic one</h3>
<ul is="super-n-list">
    <li>First child</li>
    <li>Second child</li>
</ul>

CSS

h3{
    color:red;
}