带有ES6的webcomponents-lite在IE 11和10中不起作用 [英] webcomponents-lite with ES6 doesn't work in IE 11 and 10

问题描述

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

We are using WebComponents with ES6 syntax.

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

WebComponents polyfill webcomponents-lite.js (which doesn't include ShadowDOM) is not working in IE 11 whereas the webcomponents.js (which includes ShadowDOM) works fine. For our project use case, we would like to use 'custom-elements' without ShadowDOM.

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

An error is thrown in IE, if we use webcomponents-lite.js - SCRIPT5022: Exception thrown and not caught.

是否有任何解决方法?

我正在尝试使用 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.

Yes, you can declare a Custom Element v1 with the original prototype notation.

这可与 Web Reflection 中的另一个polyfill 一起使用:

This works with another polyfill from 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方法.

Note: you'll need to use a polyfill like the one of Babel to get Reflect.construct method.

这篇关于带有ES6的webcomponents-lite在IE 11和10中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！