Question

我有一个自定义Web组件<app-list>，我正在尝试将其扩展为<calcs-list>。

// app-list.html

<script>
    window.customElements.define('app-list',

        class AppList extends HTMLElement {
            constructor() {
                super();
            }
        }

    );
</script>

在calcs-list.html中我得到了：

<link rel="import" href="app-list.html">
<script>

window.customElements.define('calcs-list',

    class CalcsList extends AppList {

        constructor() {
            super();
            console.log('CalcsList constructed');
        }

    }

);

</script>

然而，我收到错误

未捕获的ReferenceError：在calcs-list.html：11
中未定义AppList

第11行引用class CalcsList extends AppList {

这两个文件都是同一文件夹的兄弟。我在将app-list.html导入calcs-list.html时尝试使用绝对路径，但结果相同。

我也尝试将这两个组件导入到我的主index.html文件中：

//index.html
<link rel="import" href="/src/components/app-list.html">
<link rel="import" href="/src/components/calcs-list.html">

<app-list></app-list>
<calcs-list></calcs-list>

但是经历了同样的结果。

app-list组件可以在我的应用程序中正常运行。

我对这个问题感到头疼，因为Web Components是相当新的，在网上没有大量的故障排除信息，尤其是V1的Web组件。

谢谢！

Answer 1

这是因为你写的时候：

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>

Answer 2

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

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

calcs-list.html：

<script>
    class CalcsList extends AppList { ... }
    customElements.define('calcs-list', CalcsList);
</script>

注意事项：如果您使用id在父元素（要扩展的元素）中声明标记，那么这将与扩展元素和＃39;呼叫super()。

例如：

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

解决此问题的方法是使用the Google Developers引用的JavaScript字符串文字，而不是使用id。

<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>

扩展自定义元素Web组件v1

2 个答案: