Web component 扩展自定义元素web组件v1

我有一个自定义Web组件，

，我正试图扩展到

但也会经历同样的结果

应用程序列表

组件在我的应用程序中工作，没有任何问题

我对这一点感到抓狂，因为Web组件是相当新的，所以没有太多在线故障排除信息，特别是对于V1的Web组件

---

谢谢

这是因为当你写作时：

customElements.define('app-list',
    class AppList extends HTMLElement {}
);

类

AppList

仅在

define（）

调用的范围内定义。这就是为什么在第二个导入文件中使用它之后，不会看到它

相反，您应该首先定义类（全局），然后在自定义元素定义中使用它：

// app-list.html

<script>
    class AppList extends HTMLElement {
      constructor() {
        super();
      }
    }        
    window.customElements.define('app-list', AppList);
</script>

//app-list.html
类AppList扩展了HtmleElement{
构造函数（）{
超级（）；
}
}        
window.customElements.define（'app-list'，AppList'）；

这是因为当你写：

customElements.define('app-list',
    class AppList extends HTMLElement {}
);

类

AppList

仅在

define（）

调用的范围内定义。这就是为什么在第二个导入文件中使用它之后，不会看到它

相反，您应该首先定义类（全局），然后在自定义元素定义中使用它：

// app-list.html

<script>
    class AppList extends HTMLElement {
      constructor() {
        super();
      }
    }        
    window.customElements.define('app-list', AppList);
</script>

//app-list.html
类AppList扩展了HtmleElement{
构造函数（）{
超级（）；
}
}        
window.customElements.define（'app-list'，AppList'）；

多亏了@Supersharp，我重新编写了自定义组件声明：

// app-list.html    
<script>
    class AppList extends HTMLElement { ... }
    customElements.define('app-list', AppList);
</script>

注意：如果在父元素（正在扩展的元素）中声明一个id为

id

的标记，那么这将与扩展元素对

super（）

的调用冲突

例如：

<template id="app-list"> 
    ... 
</template>

---

感谢@Supersharp，我重新编写了自定义组件声明：

// app-list.html    
<script>
    class AppList extends HTMLElement { ... }
    customElements.define('app-list', AppList);
</script>

注意：如果在父元素（正在扩展的元素）中声明一个id为

id

的标记，那么这将与扩展元素对

super（）

的调用冲突

例如：

<template id="app-list"> 
    ... 
</template>

<script>

    let template = document.createElement('template');
    template.innerHTML = `
        <style> ... </style>
        <div> ... </div>
    `;

    class AppList extends HTMLElement {
        constructor() {
            super();
            let shadowRoot = this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true));
        }
    }

</script>