html - Nested web component's `attachedCallback` not running on appended -

i'm playing w3c web components.

i have homepage, includes component a:

<!-- homepage.html --> <link rel='import' href='a.html'> <component-a></component-a> 

in component include component b:

<!-- a.html --> <link rel='import' href='b.html'> <template>   <component-b></component-b>   <component-b></component-b> </template> <script>   void function() {     var currentdocument = document.currentscript.ownerdocument     function gettemplate(selector) {       return currentdocument.queryselector(selector).content.clonenode(true)     }      var proto = object.create(htmlelement.prototype)     proto.attachedcallback = function() {       console.log('a')       this.appendchild(gettemplate('template'))     }     document.registerelement('component-a', { prototype: proto })   }() </script> 

b's code similar a:

<!-- b.html --> <template>   <span>b</span> </template> <script>   void function() {     var currentdocument = document.currentscript.ownerdocument     function gettemplate(selector) {       return currentdocument.queryselector(selector).content.clonenode(true)     }      var proto = object.create(htmlelement.prototype)     proto.attachedcallback = function() {       console.log('b')       this.appendchild(gettemplate('template'))     }     document.registerelement('component-b', { prototype: proto })   }() </script> 

what's weird is, when page loaded, see "a" in console. expecting "b" twice well. , component b isn't parsed.

what weird that, if run following code in console:

document.queryselector('component-a').innerhtml += '' 

it gives me twice "b".

here's screenshot:

a friend gives me solution, use document.importnode instead of clonenode:

function gettemplate(selector) {   // return currentdocument.queryselector(selector).content.clonenode(true)   return document.importnode(currentdocument.queryselector(selector).content, true) } 

and works perfectly.