Использование пользовательского элемента Polymer 3.0 из другого веб-приложения

Я пытаюсь использовать пользовательский веб-компонент, созданный с помощью Polymer CLI, в моем веб-приложении. Я сделал следующие шаги, чтобы настроить первый фиктивный элемент с полимером:

используя узел v8.9.1, npm v5.5.1, polymer-cli v1.7.2

  1. mkdir my-custom-element && cd my-custom-element
  2. полимер инициал полимер-3-элемент
  3. полимерная подача

Демонстрационное приложение по http://localhost:8000/demo/, созданное при помощи полимерной подачи, импортирует мой пользовательский элемент и совместимо с различными браузерами. В частности, он загружает пользовательский элемент в IE 11 - это требование в моем проекте.

Мой вопрос: как я могу загрузить мой webapp index.html, чтобы использовать мой пользовательский элемент (который может быть размещен на другом сервере), как в демонстрационном приложении. Я еще не нашел документацию по этому вопросу.

Например, для полимерных элементов в https://elements.polymer-project.org/guides/using-elements приведена документация по загрузке. К сожалению, это не работает с элементами Polymer 3.0 (например, b/c импорта модулей против импорта html).

Источник

1 ответ

Решение

Я думаю, что лучший путь - это следующая выдержка из demo / index.html, созданного при инициализации полимера:

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <script type="text/javascript" src="assets/webcomponents-loader.js">/script>
   <script type="module" src="http://localhost:8000/custom-polymer-element.js"></script>
 </head>
 <body>
   <custom-polymer-element></custom-polymer-element>
 </body>
</html>

Пакет webcomponents-loader.js из пакета https://github.com/webcomponents/webcomponentsjs / npm:

"@webcomponents/webcomponentsjs": "^2.0.0",

также используется полимерной подачей и будет загружать пользовательский элемент.

Однако в настоящее время этого недостаточно, из-за проблем с совместимостью между браузерами. Мне пришлось написать дополнительный код начальной загрузки, чтобы заставить его работать в Chrome 65+, FF 59+ и IE 11, который вы можете найти здесь: https://github.com/robertfoobar/es6-custom-element

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