расширить пользовательский элемент веб-компонентов v1

Question

У меня есть собственный веб-компонент, <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 не определен в 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 работает в моем приложении без каких-либо проблем.

Я ломаю голову над этим, и поскольку веб-компоненты значительно новы, нетВ Интернете много информации об устранении неполадок, особенно с веб-компонентами V1.

Спасибо!

Answer 1

Благодаря @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, на который ссылается Разработчики Google , и вообще не используйте 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>

Answer 2

Это потому, что когда вы пишете:

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>