嵌套网络组件的`attachCallback`没有运行在附加的

Question

我在玩W3C的web组件。

我有一个主页，它包括组分A：

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

在成分AI包括另一组分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的代码是非常相似的一个：

<!-- 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> 

奇怪的是，当页面加载时，我只能在控制台中看到"a"。我期待"b"两次。而组件B并没有真正解析。

即使什么奇怪的是，如果我运行下面的控制台代码：

document.querySelector('component-a').innerHTML += '' 

它突然给了我两次"b"。

以下是截图：

Answer 1

一个朋友给了我一个解决方案，使用document.importNode代替cloneNode：

function getTemplate(selector) { 
    // return currentDocument.querySelector(selector).content.cloneNode(true) 
    return document.importNode(currentDocument.querySelector(selector).content, true) 
} 

而且它完美的作品。