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

我们正在使用带有ES6语法的WebComponents.

WebComponents polyfill webcomponents-lite.js(不包括ShadowDOM)在IE 11中不起作用,而webcomponents.js(包括ShadowDOM)工作正常.对于我们的项目用例,我们希望在没有ShadowDOM的情况下使用“custom-elements”.

如果我们使用webcomponents-lite.js,则会在IE中引发错误 – SCRIPT5022：抛出异常但未捕获.

有没有可用的解决方法？

编辑：我试图在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);

解决方法

是的,您可以使用原始原型表示法声明自定义元素v1.

这适用于来自Web Reflection的another polyfill：

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方法.