Как потреблять полимерный горит элемент? - PullRequest
Новая
       21

Как потреблять полимерный горит элемент?

0 голосов
/ 11 сентября 2018

У меня есть litElement, который мне нужно будет использовать из другого домена.Мой браузер - Chrome, я использую «полимерную подачу» и перехожу непосредственно к пакету es5.

Элемент lit очень прост.Просто статический текст.

Когда я использую 'polymer build', моя HTML-страница ввода компилируется (или трансформируется).Я вижу ссылку на 'custom-elements-es5-adapter.js', а также другие пользовательские JavaScript.Когда я перехожу на эту страницу входа (в папке сборки) все работает.Однако, если я заменил эту скомпилированную версию на исходную не скомпилированную версию, я получу ошибку в консоли chrome 'define is not defined'.

В конце концов, я буду вызывать ее из другого домена и не буду собирать HTML-код из полимера.(Я уже попробовал его кросс-домен, и он не работает)

Что мне нужно включить в клиент, чтобы использовать полимерный освещенный элемент?

Вот что у меня есть: 

<body>
    <my-element></my-element>
    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script type="module" src="./components/my-element.js" crossorigin=""?</script>
</body>

1 Ответ

0 голосов
/ 14 сентября 2018

lit-element требует шага преобразования.Файлы, которые использует браузер, должны быть преобразованы.Если вы хотите развернуть исходные исходные файлы, веб-сервер, на котором вы их развернете, должен выполнить сам шаг преобразования (как это делает polymer serve).

Источник: Лит-элемент README :

LitElement публикуется на npm с использованием модулей JavaScript.Это означает, что он может использовать преимущества стандартного встроенного загрузчика модулей JavaScript, доступного во всех современных основных браузерах.

Однако, поскольку LitElement использует соглашение npm для ссылки на зависимости по имени, требуется легкое преобразование для перезаписи спецификаторов на URL-адреса.заставить его работать в браузере.Сервер-сервер разработки polymer-cli автоматически обрабатывает это преобразование.

Такие инструменты, как WebPack и Rollup, также можно использовать для обслуживания и / или связывания LitElement.

lit-element README содержит пример, который будет запускаться в браузере без шагов преобразования.Пример загружает библиотеку lit-element как модули из unpkg следующим образом: 

<script type="module">
  import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';
  class MyElement extends LitElement {

  ...
</script>
<my-element></my-element>

Этот метод полезен, если вы хотите опробовать lit-element с меньшими затратами, но команда Polymer не рекомендуетделать это в производстве;AFAIK unpkg не гарантирует работоспособность и производительность.

...