Веб-компоненты, основанные на классе трансляции, с babel

Question

У меня есть простой веб-компонент, следующий за последним web components v1 class syntax, он отлично работает в Chrome и Firefox/Edge (с полифоном), но я бы хотел, чтобы он работал в IE11, поэтому мне нужно перераспределить класс. Однако запуск его через babel создает код, который больше не работает в любом браузере.

Есть ли способ создать обратно совместимые веб-компоненты с синтаксисом класса или есть предпочтительный способ создания веб-компонентов для максимальной совместимости?

Пример кода -

class TestElement extends HTMLElement { 
    connectedCallback(){ 
    this.innerHTML = "<div>Testing</div>" 
    } 
} 

customElements.define('test-element', TestElement) 

Сообщение об ошибке при использовании transpiled коды -

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

Answer 1

Чтобы скомпилировать классы пользовательских элементов с помощью Babel, вы можете использовать этот plugin от Github.

Он будет использовать Reflect.construct() вместо new, что недопустимо с HTMLElement объектами.

Answer 2

Одним из решений является использование нативной регулировочная шайба доступно с этим polyfill https://github.com/webcomponents/custom-elements

Это не но все же хотел бы найти более чистое решение.