使用babel透明化基于类的Web组件-Java 学习之路

我有一个简单的Web组件，遵循最新的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)

使用转换代码时出现错误信息是 -

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

2 回答

5

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

它将使用 Reflect.construct() 而不是 new ，这是 HTMLElement 对象不允许的 .

回复于 2024-05-05T20:56:21+08:00
5

一种解决方案是使用此polyfill可用的原生垫片https://github.com/webcomponents/custom-elements

但它并不完美，希望找到更清洁的解决方案 .

回复于 2024-05-05T20:56:21+08:00

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

2 回答

相关问题