拡張のHTMLElementは：コンストラクタのWebPACKを使用した場合に失敗し

Question

IましES5にtranspiled以下の活字体のプログラム：

ファイル1：

class BaseElement extends HTMLElement { 
    constructor() { 
     super(); 
    } 
} 

ファイル2：

import {BaseElement} from './BaseElement'; 

class MyElement extends BaseElement { 
    constructor() { 
     super(); 
    } 
} 

var el = new MyElement(); 

は内手作業すべてを置きますコードがうまく動作し、ブラウザで実行されると、HTMLElementは問題なく構築されます。しかし、できるだけ早く私はWebPACKのを経由して、それをパックとして、私は次のようなエラーメッセージが出ます：WebPACKをなし

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

を、以下のJSコードが構築される：WebPACKのを使用して

var __extends = (this && this.__extends) || function (d, b) { 
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; 
    function __() { this.constructor = d; } 
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 
}; 
var BaseElement = (function (_super) { 
    __extends(BaseElement, _super); 
    function BaseElement() { 
     _super.call(this); 
    } 
    return BaseElement; 
}(HTMLElement)); 
var MyElement = (function (_super) { 
    __extends(MyElement, _super); 
    function MyElement() { 
     _super.call(this); 
    } 
    MyElement.prototype.createdCallback = function() { 
     this.innerHTML = "lol"; 
    }; 
    return MyElement; 
}(BaseElement)); 
var el = new MyElement(); 

は、次のコードが構築されます：

var __extends = (this && this.__extends) || function (d, b) { 
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; 
    function __() { this.constructor = d; } 
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 
}; 
/******/ (function(modules) { // webpackBootstrap 
/******/ // The module cache 
/******/ var installedModules = {}; 

/******/ // The require function 
/******/ function __webpack_require__(moduleId) { 

/******/  // Check if module is in cache 
/******/  if(installedModules[moduleId]) 
/******/   return installedModules[moduleId].exports; 

/******/  // Create a new module (and put it into the cache) 
/******/  var module = installedModules[moduleId] = { 
/******/   exports: {}, 
/******/   id: moduleId, 
/******/   loaded: false 
/******/  }; 

/******/  // Execute the module function 
/******/  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 

/******/  // Flag the module as loaded 
/******/  module.loaded = true; 

/******/  // Return the exports of the module 
/******/  return module.exports; 
/******/ } 


/******/ // expose the modules object (__webpack_modules__) 
/******/ __webpack_require__.m = modules; 

/******/ // expose the module cache 
/******/ __webpack_require__.c = installedModules; 

/******/ // __webpack_public_path__ 
/******/ __webpack_require__.p = ""; 

/******/ // Load entry module and return exports 
/******/ return __webpack_require__(0); 
/******/ }) 
/************************************************************************/ 
/******/ ([ 
/* 0 */ 
/***/ function(module, exports, __webpack_require__) { 

    __webpack_require__(1); 
    __webpack_require__(2); 

/***/ }, 
/* 1 */ 
/***/ function(module, exports) { 

    "use strict"; 
    var BaseElement = (function (_super) { 
     __extends(BaseElement, _super); 
     function BaseElement() { 
      _super.call(this); 
     } 
     return BaseElement; 
    }(HTMLElement)); 
    exports.BaseElement = BaseElement; 


/***/ }, 
/* 2 */ 
/***/ function(module, exports, __webpack_require__) { 

    "use strict"; 
    var BaseElement_1 = __webpack_require__(1); 
    var MyElement = (function (_super) { 
     __extends(MyElement, _super); 
     function MyElement() { 
      _super.call(this); 
     } 
     MyElement.prototype.createdCallback = function() { 
      this.innerHTML = "lol"; 
     }; 
     return MyElement; 
    }(BaseElement_1.BaseElement)); 
    exports.MyElement = MyElement; 
    // TODO: inject 
    var p = new MyElement(); 
/***/ } 
/******/ ]); 

基本的に、webpackは任意のモジュールを関数に置き、その間にエクスポート変数を保持しますが、HTMLElementの構築は失敗します。 webpack（上記のコード）がなければ、うまく動作します。

アイデア？

Answer 1

これは蒸散問題です。あなたがtranspilingやES5を使用している場合は、ネイティブのWebコンポーネントをサポートしているブラウザのネイティブ・シムをバンドルする必要があります。（https://github.com/webcomponents/custom-elements/blob/master/src/native-shim.js）

HTMLElementこのコンストラクタが使用しているため

ES5-スタイルクラスは、ネイティブのカスタム要素では動作しません。 new.targetの値を使用して、現在呼び出されているコンストラクタのカスタム要素定義を参照します。 new.targetは、newが呼び出されたときにのみ設定され、super（）呼び出しによってのみ伝播されます。 super（）はES5ではエミュレートできません。 SuperClass.call(this)`` only works when extending other ES5-style classes, and does not propagate new.target`のパターン。

チェック問題の議論https://github.com/webcomponents/custom-elements/issues/29

Answer 2

webpackを使用していないのですか？ playgroundで実行すると、（実行時に）記述したのと同じエラーが発生します。

とにかく、HTMLElementを拡張しないでください。
HTMLElementは実際にはtypescriptのインターフェイスなので、何かがあればそのように実装する必要があります。
これはブラウザにオブジェクト型として存在しますが、typescriptクラスとして宣言されていないため、typescriptは適切に拡張できません。

この問題を回避する方法については、answerを参照してください。