Импорт пользовательского элемента в javascript

Question

Я пытаюсь использовать пользовательские элементы. Я хочу использовать JS для создания элементов и добавления их в DOM. Если я использую все это в одном файле с базовой html-страницей, все работает нормально.

'use strict'; 
class FlashCard extends HTMLElement { 
constructor(cardSet) { 
    super(); 
    this.cardSet = cardSet; 
    this.cardNumber = 0; 
} 
connectedCallback() { 
    this.id = 'flashcard'; 
    this.style.cursor = 'pointer'; 
    this.render(this.cardSet); 
    this.addEventListener('click', this.onClick); 
} 

render() { 
    this.innerHTML = this.cardSet[this.cardNumber]; 
} 

onClick() { 
    let deckSize = this.cardSet.length; 
    if (this.cardNumber === deckSize-1) { 
     this.cardNumber = 0; 
    } else { 
     this.cardNumber++; 
    }; 
    this.render(); 
} 
} 
customElements.define('flash-card', FlashCard); 
document.addEventListener('DOMContentLoaded', function() { 
let card = new FlashCard(['a', 'b', 'c', 'd']); 
document.getElementsByTagName('body')[0].appendChild(card); 
}); 

Проблемы возникают, когда я пытаюсь разделить код на отдельные файлы.

'use strict'; 
export default class FlashCard extends HTMLElement { 
    constructor(cardSet) { 
     super(); 
     this.cardSet = cardSet; 
     this.cardNumber = 0; 
    } 
    connectedCallback() { 
     this.id = 'flashcard'; 
     this.style.cursor = 'pointer'; 
     this.render(this.cardSet); 
     this.addEventListener('click', this.onClick); 
    } 

    render() { 
     this.innerHTML = this.cardSet[this.cardNumber]; 
    } 

    onClick() { 
     let deckSize = this.cardSet.length; 
     if (this.cardNumber === deckSize-1) { 
      this.cardNumber = 0; 
     } else { 
      this.cardNumber++; 
     }; 
     this.render(); 
    } 
} 
customElements.define('flash-card', FlashCard); 

И В отдельном файле

import FlashCard from './flashcard'; 

    document.addEventListener('DOMContentLoaded', function() { 
    let card = new FlashCard(['a', 'b', 'c', 'd']); 
document.getElementsByTagName('body')[0].appendChild(card); 
}); 

Я тогда transpile в JavaScript из-за экспорта/импорта с использованием НПМ скрипт в файле package.json

"watch": "watchify elements/*.js -t babelify --plugins transform-es2015-classes 
-o js/bundle.js --debug --verbose", 

двутавровых ошибка получить в Хром 55 составляет

Failed to construct 'HTMLElement': Please use the 'new' 
operator, this DOM object constructor cannot be called as a function. 

Таким образом, преобразованный код пытается вызвать метод конструктора для объекта HTMLElement, но в этом случае метод не является функцией.

Мой вопрос в том, как разделить мой код на отдельные файлы, как я пытаюсь выше, но каким образом транспилятор может интерпретировать правильно?

Answer 1

Вы должны попытаться использовать Reflect.construct() вместо super() в методе constructor().

var self = Reflect.construct(HTMLElement, [], Flashcard) 
self.cardSet = cardSet 
... 
return self 

Кроме того, вы можете попробовать это plugin, который должен решить проблему (я не проверял).