2

I am trying to use the Microservices Architechture in my app, but am a little confused about the front-end integration. Here is my configuration:

PHP Server -> serving Main HTML application page containing embedded Web Component (Custom HTML Element)

Python Server -> serving the Embedded Web Component and related data

How do I include the Embedded Web Component (which resides in an HTML file) in my main web page? HTML imports will be deprecated as of Feb 2020, and AFAIK ES6 imports allow you to only import js files?

Here is the basic code for my embedded custom web component:

<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>

What import statement do I have to use in my Main HTML application so that I can put the algo-box tag/component in my Main HTML page? Am I missing something basic? Or am I approaching this in the wrong way?

Any help would be appreciated. Thanks in advance.

nparabz
  • 143
  • 1
  • 2
  • 12
  • Can you share an example of `data`? – qiAlex Feb 07 '20 at 15:40
  • data is just stock market data array with (open, high, low, close, volume, etc). But, I'm not sure how it is relevant to the question? I mean, even if I remove the algo-chart component (which uses the data) and keep just the algo-messages component, the question still remains. How do I import this html file into another html document so that I can use the algo-box element?. – nparabz Feb 07 '20 at 15:47
  • 1
    Don't use a TEMPLATE (or create it with JS).. in other words, do everything in your JS file, which you can then import. If you are not re-using templates then ``.attachShadow({mode:"open"}).innerHTML=....`` is all you need, or ``.appendChild(docFrag)`` if you built your Component HTML in a DocumentFragment – Danny '365CSI' Engelman Feb 07 '20 at 16:21
  • 1
    also note ``const shadowRoot = this.attachShadow({mode: 'open'})`` is not required; an *open* shadowDOM will **return** and **set** ``this.shadowRoot`` for free – Danny '365CSI' Engelman Feb 07 '20 at 16:26
  • @Danny'365CSI'Engelman Thanks v.much for your help and sorry for the late reply. I have tried to implement your suggestions. I created the code in JS. I was not reusing templates, so I just did a this.appendChild(fragment). I left out this.attachShadow() as per your suggestion, but there is no this.shadowRoot created. – nparabz Feb 08 '20 at 03:36
  • 1
    I meant to say you can write ``const shadowRoot = this.attachShadow({mode: 'open'})`` as ``this.attachShadow({mode: 'open'})`` because the attachShadow method sets the ``this.shadowRoot`` property (from null to your shadow root) – Danny '365CSI' Engelman Feb 08 '20 at 09:47
  • 3
    Does this answer your question? [How to separate web components to individual files and load them?](https://stackoverflow.com/questions/55080103/how-to-separate-web-components-to-individual-files-and-load-them) – Supersharp Feb 08 '20 at 22:35
  • @Danny'365CSI'Engelman Sorry for the late reply. I was caught up in a family issue, so was away from my pc for a week. Got it! Thanks v.much for all your help... – nparabz Feb 15 '20 at 12:58
  • @Supersharp Sorry for the late reply. I was caught up in a family issue, so was away from my pc for a week. Yes, I think your link is what I was looking for!! Thanks v.much for your help... – nparabz Feb 15 '20 at 13:01

0 Answers0