使用babel透明化基于类的Web组件

Question

我在最新的web components v1 class syntax之后有一个简单的网络组件，它在Chrome和Firefox / Edge（带有polyfill）方面效果很好但是我希望它能在IE11中运行所以我需要转换类。但是，通过babel运行它会生成不再适用于任何浏览器的代码。

有没有办法用类语法生成向后兼容的Web组件，还是有一种首选方法来编写Web组件以实现最大兼容性？

示例代码 -

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

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

使用转换代码时的错误消息是 -

  

未捕获TypeError：无法构造'HTMLElement'：请使用'new'运算符，此DOM对象构造函数不能作为函数调用。

Answer 1

一种解决方案是使用此polyfill可用的native-shim https://github.com/webcomponents/custom-elements

虽然不完美，但希望找到更清洁的解决方案。

Answer 2

要使用Babel编译自定义元素类，您可以使用Github中的plugin。

它将使用Reflect.construct()代替new，HTMLElement个对象不允许使用{。}}。