ES6下的webcomponents-lite在ie11和ie10下无法工作

webcomponents-lite with ES6 doesn't work in IE 11 and 10

本文关键字：工作 ie10 下的 webcomponents-lite ie11 ES6      更新时间：2023-09-26

我们使用的是ES6语法的WebComponents。

WebComponents polyfill WebComponents -lite.js(不包括ShadowDOM) 在IE 11中不工作，而WebComponents .js(包括ShadowDOM)工作得很好。对于我们的项目用例，我们想使用'custom-elements'而不使用ShadowDOM。

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

，会在IE中抛出错误

是否有其他解决方法?

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

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

这适用于来自Web Reflection:

的另一个多边形。
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 )

注意:你需要使用一个像Babel一样的填充来获得Reflect.construct方法。

相关文章：