延伸HTMLElement的：当使用的WebPack构造失败

Question

我transpiled到ES5以下打字稿程序：

文件1：

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

文件2：

import {BaseElement} from './BaseElement'; 

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

var el = new MyElement(); 

手动把内的一切一个文件，代码工作正常，并在浏览器中执行，HTMLElement构造没有问题。然而，当我通过的WebPack收拾它，我收到以下错误信息：

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

没有的WebPack，下面的JS代码构造：

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

使用的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 __()); 
}; 
/******/ (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任何模块成一个函数，并保持它们之间的出口变量，然而HTML元素的构造失败。没有webpack（上面的代码），它工作正常。

任何想法？

Answer 1

这是transpiling问题。如果您transpiling或使用ES5，那么你需要捆绑本机垫片与本地Web组件支持的浏览器。（https://github.com/webcomponents/custom-elements/blob/master/src/native-shim.js）

ES5风格类不与本地自定义元素工作，因为HTML元素构造函数使用值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实际上是打字稿中的一个接口，所以如果有任何事情你应该这样做。
它作为浏览器中的对象类型存在，但尚未被声明为打字稿类，因此打字稿无法正确地扩展它。

有关解决此问题的方法，请参见answer。