HTML-импорт веб-компонентов не работает в Firefox

Я пробую веб-компоненты в примере приложения. Так как некоторые спецификации не включены в некоторые браузеры, я попытался использовать для них polyfill. В Mozilla Firefox я попытался включить ключ dom.webcomponents.enabled и добавить некоторые полифилы (которых нет в браузере). Я использовал полифилл HTML Import из webfponents.js polyfill.

Тем не менее HTMLImport не работает в Firefox, Internet Explorer (даже с PolyFill). ( https://github.com/webcomponents/webcomponentsjs)

Я также пробовал customElements v1 polyfill, не работающий в Internet Explorer и Firefox. ( https://github.com/webcomponents/custom-elements)

Кто-нибудь преуспел в том, чтобы включить HTMLFimport polyfill с customElements V1 polyfill?

Источник

1 ответ

Решение

Чтобы использовать в Firefox пользовательские элементы v1 с импортом HTML:

  1. Не активируйте флаги Firefox, поскольку реализация устарела.
  2. Установите webcomponentsjs (например, с bower) и включите только в основной файл htmlimports.min.js файл.
  3. Установите custom-элементы (по вашей ссылке) и включите в свой основной файл custom-elements.min.js,

Ваша главная страница должна выглядеть так:

<head>
   <script src="htmlimports.min.js"></script>
   <script src="custom-elements.min.js"></script>
   <link rel="import" href="your-components.html">
</head>
<body>
    <your-component></your-component>

Примечание: для шага 3 вы также можете использовать https://github.com/WebReflection/document-register-element.

Вы не можете использовать пользовательские элементы v1 class Синтаксис с Internet Explorer напрямую, потому что class не реализовано. Сначала вам нужно преобразовать исходный код с помощью транспилятора, такого как Babel.

Альтернативно, используйте современную версию (Edge), или используйте prototype синтаксис.

Источник
Другие вопросы по тегам