Question

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

WebComponents polyfill webcomponents-lite.js （不包含ShadowDOM）在IE 11中不起作用而webcomponents.js（其中包括ShadowDOM）工作正常。对于我们的项目用例，我们希望使用＆＃39; custom-elements＆＃39;没有ShadowDOM。

如果我们使用webcomponents-lite.js - SCRIPT5022: Exception thrown and not caught.

，则会在IE中引发错误

是否有可用的解决方法？

编辑：我尝试使用webcomponents-lite.js

在IE中运行的代码

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。

这适用于来自 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方法。

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

1 个答案: