嵌套元素（Web组件）无法获取其模板

我做了一个简单的例子，使用带有两个自定义元素（v1）的Web组件，其中一个嵌套在另一个元素中。 index.html的： 

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="import" href="app-container.html"> </head> <body> <app-container></app-container> </body> </html>

APP-container.html： 

 <link rel="import" href="toolbar.html"> <template id="app-container"> <app-toolbar></app-toolbar> </template> <script> 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)); } }); </script>

toolbar.html： 

 <template id="app-toolbar"> <p>Ok!</p> </template> <script> 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)); } }); </script>

但是在toolbar.html document.currentScript与app-container.html中的相同，因此querySelector('#app-toolbar')无法findid为app-toolbar模板。 如何解决这个问题？

在Chrome 55上testing的例子（没有polyfill）。

document.currentScript包含对当前被parsing和执行的脚本的引用。 因此，当constructor()函数被调用时（从另一个脚本），你的目的不再有效。

相反，你应该在脚本的开头将它的值保存在一个variables中，然后在构造函数中使用这个variables： 

 <script> var currentScript = document.currentScript customElements.define( ... ) ... </script>

如果您有多个脚本，则应使用不同的名称。

或者，您可以将临时值封装在闭包中： 

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

这里document.currentScript.ownerDocument的值被赋值给owner参数，当调用constructor()时候仍然可以正确的定义owner参数。

owner是本地定义的，所以您可以在其他文档中使用相同的名称。

Interesting Posts