javascript - 带有 ES6 的 webcomponents-lite 在 IE 11 和 10 中不起作用

Question

我们正在使用具有 ES6 语法的 WebComponents。

WebComponents polyfill webcomponents-lite.js(不包括 ShadowDOM)在 IE 11 中不工作，而 webcomponents.js(包括 ShadowDOM)工作正常。对于我们的项目用例，我们希望使用不带 ShadowDOM 的“自定义元素”。

如果我们使用 webcomponents-lite.js，IE 会抛出一个错误 - SCRIPT5022: Exception thrown and not caught.

是否有可用的解决方法？

编辑:我试图在 IE 中使用 webcomponents-lite.js 运行的代码

HTML:<super-button></super-button>

JS(ES6 格式):

class SuperBtn extends HTMLElement {
  constructor() {
      super();
  }
  createdCallback() {
      this.innerHTML = "Invoke Ultron!";
      this.addEventListener('click', () => alert(this.textContent + ' has been clicked'));
    }
}

document.registerElement("super-button", SuperBtn);

Answer 1

是的，您可以使用原始 prototype 表示法声明自定义元素 v1。

这适用于 another polyfill来自 Web 反射:

var CEo = function ()
{
    console.log( "created" )
    return Reflect.construct( HTMLElement, [], CEo )
}

CEo.prototype = Object.create( HTMLElement.prototype )
CEo.prototype.constructor = CEo

CEo.prototype.connectedCallback = function ()
{
    console.log( "connected" )
    this.innerHTML = "Hello v1"
} 

customElements.define( "object-v1", CEo ) 

注意:您需要使用类似 the one of Babel 的 polyfill获取 Reflect.construct 方法。