Class Drag and Drop Web Components with babel

Question

I have a simple web component following the last syntax of the web components class v1 , it works fine in Chrome and Firefox / Edge (with polyfill), but I would like it to work in IE11, so I need to translate the class. However, running it through babel creates code that no longer works in any browser.

Is there a way to create backward compatible web components with class syntax, or is there a preferred way to write web components for maximum compatibility?

Code Example -

class TestElement extends HTMLElement { connectedCallback(){ this.innerHTML = "<div>Testing</div>" } } customElements.define('test-element', TestElement) 

Error message when using the passed code -

Uncaught TypeError: Failed to create "HTMLElement": use the "new" operator, this constructor of the DOM object cannot be called a function.

Answer 1

To compile Custom Element classes using Babel, you can use this plugin from Github.

It will use Reflect.construct() instead of new , which is not valid with HTMLElement objects.

Answer 2

One solution is to use a built-in pad with this polyphon https://github.com/webcomponents/custom-elements

This is not ideal, although I would like to find a cleaner solution.