Как импортировать веб-компонент (пользовательский элемент html), определенный в файле html, на другую страницу html, размещенную на другом сервере - PullRequest
Новая
       9

Как импортировать веб-компонент (пользовательский элемент html), определенный в файле html, на другую страницу html, размещенную на другом сервере

2 голосов
/ 07 февраля 2020

Я пытаюсь использовать Microservices Architechture в своем приложении, но меня немного смущает интеграция внешнего интерфейса. Вот моя конфигурация:

PHP Сервер -> обслуживающая главная HTML страница приложения, содержащая встроенный веб-компонент (пользовательский HTML Элемент)

Python Сервер -> обслуживающий встроенный Веб-компонент и связанные с ним данные

Как включить встроенный веб-компонент (который находится в файле HTML) в мою главную веб-страницу? HTML импорт будет устаревшим с февраля 2020 года, а импорт AFAIK ES6 позволяет импортировать только js файлы?

Вот базовый c код для моего встроенного пользовательского веб-компонента: 

<template id="algo-box-template">
  <slot name="algo-chart"></slot>
  <slot name="algo-messages"></slot>
</template>

<script src="./highstock.js"></script>
<script type="module">
  import AlgoChart from "/js/algochart.js";

  customElements.define('algo-box',
    class extends HTMLElement {
      connectedCallback() {
        var template = document
          .getElementById('algo-box-template')
          .content;
        const shadowRoot = this.attachShadow({mode: 'open'})
          .appendChild(template.cloneNode(true));

        var data = fetch("http://xx.xx.xx.xx/some_path/some_url_parameter")
                  .then((response) => { response.json().then((data) => { this.childNodes[0].nextElementSibling.d = data; });});
      }
    }
  );
</script>

<algo-box class="algo-box">
    <algo-chart slot="algo-chart" />
    <algo-messages slot="algo-messages" />
</algo-box>

Какой оператор импорта я должен использовать в своем приложении Main HTML, чтобы я мог поместить тег / компонент al go -box на мою страницу Main HTML? Я что-то упускаю из виду c? Или я подхожу к этому неправильно?

Любая помощь будет оценена. Заранее спасибо.

...