扩展自定义元素 Web 组件 v1

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>

但是，我得到了错误

Uncaught ReferenceError: AppList is not defined at calcs-list.html:11

第 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 组件是相当新的东西，在线上没有很多故障排除信息，尤其是在 Web 组件 V1 中。

谢谢！

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，那么这将与扩展元素对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>