嵌套網絡組件的`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) 
} 

而且它完美的作品。