1

我有一个自定义 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：AppList 未在 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。

谢谢！

4

2 回答 2

4

这是因为当你写：

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>
于 2018-06-06T23:33:47.887 回答
0

感谢@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>

解决此问题的方法是使用Google Developers引用的 JavaScript 字符串文字，而根本不使用 an 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>
于 2018-06-07T02:01:35.613 回答