title: extending HTMLElement: Constructor fails when webpack was used
body: <p>I got the following TypeScript program transpiled to ES5:</p>
  
  <p>File 1:</p>
  
  <pre><code>class BaseElement extends HTMLElement {
      constructor() {
          super();
      }
  }
  </code></pre>
  
  <p>File 2:</p>
  
  <pre><code>import {BaseElement} from './BaseElement';
  
  class MyElement extends BaseElement {
      constructor() {
          super();
      }
  }
  
  var el = new MyElement();
  </code></pre>
  
  <p>Putting everything manually within a file, the code works fine and executes in the browser, the HTMLElement is constructed without problems. However, as soon as I pack it via webpack, I get the following error message:</p>
  
  <pre><code>Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
  </code></pre>
  
  <p>Without webpack, the following JS code is constructed:</p>
  
  <pre><code>var __extends = (this &amp;&amp; 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();
  </code></pre>
  
  <p>Using webpack, the following code is constructed:</p>
  
  <pre><code>var __extends = (this &amp;&amp; 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();
  /***/ }
  /******/ ]);
  </code></pre>
  
  <p>Basically, webpack puts any module into a function and maintains an export variable between them, however the construction of HTMLElement fails. Without webpack (code above), it works fine.</p>
  
  <p>Any ideas? </p>