L’elemento nidificato (componente web) non può ottenere il suo modello

Ho fatto un semplice esempio utilizzando Web Components con due elementi personalizzati (v1) in cui uno è annidato in un altro. index.html:

    Example         

app-container.html:

      customElements.define('app-container', class extends HTMLElement { constructor() { super(); let shadowRoot = this.attachShadow({ mode: 'open' }); const content = document.currentScript.ownerDocument.querySelector('#app-container').content; shadowRoot.appendChild(content.cloneNode(true)); } });  

toolbar.html:

  

Ok!

customElements.define('app-toolbar', class extends HTMLElement { constructor() { super(); let shadowRoot = this.attachShadow({ mode: 'open' }); const content = document.currentScript.ownerDocument.querySelector('#app-toolbar').content; shadowRoot.appendChild(content.cloneNode(true)); } });

Ma nel file toolbar.html document.currentScript è uguale a nell’app-container.html e quindi querySelector('#app-toolbar') non trova il modello con id app-toolbar . Come risolvere questo problema?

Esempio testato su Chrome 55 (senza polyfill).