扩展自定义元素 web 组件 v1

Question

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

// app-list.html

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

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

    );
</script>

在计算中-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 Components 相当新，网上没有很多故障排除信息，尤其是 Web Components V1。

谢谢！

Answer 1

这是因为当你写的时候：

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

class AppList 仅在 define() 调用的范围内定义。这就是为什么在第二个导入文件中之后使用它时看不到它的原因。

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

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

解决此问题的方法是使用 JavaScript 字符串文字，如 the Google Developers 所引用，而根本不使用 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

extend custom element web components v1

extends

web-component

custom-element

native-web-component