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.
Comments
Post a Comment