Étendre HTMLElement: le constructeur échoue lorsque le webpack a été utilisé

J'ai obtenu le programme TypeScript suivant transpilé vers ES5:

Fichier 1:

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

Fichier 2:

 import {BaseElement} from './BaseElement'; class MyElement extends BaseElement { constructor() { super(); } } var el = new MyElement();

Mettre tout manuellement dans un fichier, le code fonctionne bien et s'exécute dans le navigateur, le HTMLElement est construit sans problème. Cependant, dès que je l'emploie via le webpack, je reçois le message d'erreur suivant:

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

Sans webpack, le code JS suivant est construit:

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

À l'aide de Webpack, le code suivant est construit:

 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(); /***/ } /******/ ]);

Fondamentalement, le webpack met tout module dans une fonction et maintient une variable d'exportation entre eux, mais la construction de HTMLElement échoue. Sans webpack (code ci-dessus), ça marche bien.

Des idées?

C'est un problème de transpiration. Si vous transférez ou utilisez ES5, vous devez regrouper native-shim pour les navigateurs avec support natif des composants Web. ( https://github.com/webcomponents/custom-elements/blob/master/src/native-shim.js )

Les classes ES5 ne fonctionnent pas avec des éléments personnalisés natifs car le constructeur HTMLElement utilise la valeur de new.target pour rechercher la définition d'élément personnalisée pour le constructeur actuellement appelé. new.target est uniquement configuré lorsque le new appel est appelé et ne se propage que via les appels super (). Super () n'est pas émulable dans ES5. Le modèle de SuperClass.call(this)`` only works when extending other ES5-style classes, and does not propagate new.target`.

Vérifiez la discussion sur les problèmes https://github.com/webcomponents/custom-elements/issues/29

Êtes-vous sûr de fonctionner sans le webpack? L'exécution à travers le terrain de jeu donne la même erreur que celle décrite (au moment de l'exécution).

Quoi qu'il en soit, vous ne devriez pas étendre le HTMLElement .
Le HTMLElement est en fait une interface à l'écriture, de sorte que, si quelque chose que vous devriez l'implémenter comme tel.
Il existe comme type d'objet dans le navigateur, mais il n'a pas été déclaré comme une classe dactylographiée, de sorte que le typecript n'est pas capable de l'étendre correctement.

Pour en savoir plus sur ce problème, consultez cette réponse .