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

我们使用带有 ES6 语法的 WebComponents。

Web组件 http://webcomponents.org/填充材料webcomponents-lite.js（不包括 ShadowDOM）无法在 IE 11 中运行而 webcomponents.js（包括 ShadowDOM）工作正常。对于我们的项目用例，我们希望使用不带 ShadowDOM 的“自定义元素”。

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

有没有可用的解决方法？

编辑：我试图在 IE 中运行的代码webcomponents-lite.js https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/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);

是的，您可以使用原始元素声明自定义元素 v1prototype符号。

这适用于另一个polyfill https://github.com/WebReflection/document-register-element from 网络反射:

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 ) 

Note:你需要使用像这样的polyfill巴别塔之一 https://babeljs.io/docs/usage/polyfill/ to get Reflect.construct method.