Tag: html imports
嵌套元素（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)); } }); […]
