CODEWITHSUNDEEP
javascriptecmascript-6polymerweb-component
Aleem S
Aleem S

Reputation: 151

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

We are using WebComponents with ES6 syntax.

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.

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

Is there any workaround available ?

EDIT: The code which I'm trying to run in IE with webcomponents-lite.js

HTML: <super-button></super-button>

JS(ES6 format):

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);

Upvotes: 4

Views: 1485

Answers (1)

Supersharp
Supersharp

Reputation: 31219

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

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 )

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

Upvotes: 0

Related Questions