在 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);
});

然后我转译 javascript 因为 export/import 使用 package.json 文件中的 npm 脚本

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

我在 Chrome 55 中得到的错误是

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

所以转译后的代码试图调用 HTMLElement 对象的构造方法，但在这种情况下该方法不是函数。

我的问题是如何将我的代码拆分成单独的文件，就像我在上面尝试的那样，但在某种程度上转译器可以正确解释？

Answer 1

您应该尝试在 constructor() 方法中使用 Reflect.construct() 而不是 super()。

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

此外，您可以试试这个 plugin 应该可以解决问题（我没有测试）。

在 javascript 中导入自定义元素

Import a custom element in javascript

javascript

web-component

transpiler

custom-element

babeljs