Блог

Главная - Вопросы по программированию - web components-lite с ES6 не работает в IE 11 и 10

web components-lite с ES6 не работает в IE 11 и 10

#javascript #ecmascript-6 #polymer #web-component

#javascript #ecmascript-6 #полимер #веб-компонент

Вопрос:

Мы используем веб-компоненты с синтаксисом ES6.

Полизаполнение веб-компонентов webcomponents-lite.js (который не включает ShadowDOM) не работает в IE 11, тогда как webcomponents.js (который включает в себя ShadowDOM) работает нормально. Для нашего варианта использования в проекте мы хотели бы использовать «пользовательские элементы» без ShadowDOM.

В IE выдается ошибка, если мы используем webcomponents-lite.js — SCRIPT5022: Exception thrown and not caught.

Есть ли какое-либо обходное решение?

РЕДАКТИРОВАТЬ: код, который я пытаюсь запустить в 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);

Комментарии:

1. что вы подразумеваете под синтаксисом ES6? Вы можете использовать пользовательские элементы без DOM, используя webcomponents.js в любом случае.

2. да, я имел в виду class обозначения. Он работает с webcomponents.js но не с webcomponents-lite.js

3. Я добавил проблему в репозиторий web components на github (более усовершенствованным способом). Пожалуйста, посмотрите — github.com/webcomponents/webcomponentsjs/issues/631 .

4. Хорошо, я вижу, что вы используете транспилятор. Я думал, вы используете только JS в браузере. Вы пробовали без super или без конструктора?

5. удаление super() или constructor не помогает. _inherits() Метод добавляется из транспилятора при использовании extends , который нам, очевидно, нужен для HTMLElement. Здесь HTMLElement возвращается как Object вместо function, что, кстати _inherits() , ожидается методом

Ответ №1:

Да, вы можете объявить пользовательский элемент v1 с оригинальной prototype нотацией.

Это работает с другим полизаполнением из веб-отражения:

 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 to get Reflect.construct .