Importer un élément personnalisé en javascript

Question

J'essaie d'utiliser des éléments personnalisés. Je veux utiliser JS pour créer les éléments et les ajouter au DOM. Si j'utilise ce tout en un fichier avec une page html basique tout fonctionne bien. Mes problèmes commencent quand j'essaie de scinder le code en fichiers séparés.

'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); 

Et dans un fichier séparé

import FlashCard from './flashcard'; 

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

Je puis transpile le javascript en raison de l'import/export en utilisant un script NPM dans le fichier package.json

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

L'erreur I entrer dans Chrome 55 est

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

Donc le code transpilé essaie d'appeler la méthode constructeur sur l'objet HTMLElement, mais la méthode n'est pas une fonction dans ce cas.

Ma question est de savoir comment découper mon code en fichiers séparés, comme je tente de le faire ci-dessus mais d'une manière que le transpiler peut interpréter correctement?

Answer 1

Vous devriez essayer d'utiliser Reflect.construct() au lieu de super() dans la méthode constructor().

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

En outre, vous pouvez essayer cette plugin qui est censé résoudre le problème (je ne l'ai pas le tester).