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

Я пытаюсь использовать пользовательский веб-компонент, созданный с помощью 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 # using-elements о том, как выполнить загрузку.К сожалению, это не работает с элементами Polymer 3.0 (например, b / c импорта модулей против импорта html).

1 Ответ

0 голосов
/ 30 мая 2018

Я думаю, что лучший путь - следующая выдержка из сгенерированной полимерной инициации 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

...