extending HTMLElement: Constructor fails when webpack was used

ES5-style classes don't work with native Custom Elements

To do a work around, just change the target in the tsconfig.json file to es6.

It is transpiling issue. If you are transpiling or using ES5 then you need to bundle native-shim for browsers with native Web components support.(https://github.com/webcomponents/custom-elements/blob/master/src/native-shim.js)

ES5-style classes don't work with native Custom Elements because the HTMLElement constructor uses the value of new.target to look up the custom element definition for the currently called constructor. new.target is only set when new is called and is only propagated via super() calls. super() is not emulatable in ES5. The pattern of SuperClass.call(this)`` only works when extending other ES5-style classes, and does not propagatenew.target`.

Check the issue discussion https://github.com/webcomponents/custom-elements/issues/29

I fixed this issue with help of this issue - https://github.com/facebook/create-react-app/issues/3225

Basically i installed these 2 plugins via npm and in my WebPack config added those 2 plugins for Babel:

use: [
    {
        loader: 'babel-loader',
            options: {
                presets: ['es2015'],
                // https://github.com/facebook/create-react-app/issues/3225
                plugins: ['transform-custom-element-classes', 'transform-es2015-classes']
            },
        }
    ],