1

I'm in a bit of a trouble and I hope that I'll find the answer here: I have an angular 5 app using polymer 2 components. First I add the elements dynamically the head of the dom like this <link id="ace-widget-link" rel="import" href="https://lostinbrittany.github.io/ace-widget/components/ace-widget/ace-widget.html">

Then the user select some elements to add to his dashboard What I do is to append the element tag to the dom like so <ace-widget></ace-widget>

Now here comes the problems:

  1. The first element that I add is only displayed when I refresh the page.

  2. If add two or more elements only the first one appears (even after refresh).

Note that when I added the links statically to index.html everything worked fine.

malek yahyaoui
  • 379
  • 3
  • 17
  • maybe you can try to use importHref instead of appending the link tags yourself.. https://www.polymer-project.org/2.0/docs/api/#function-Polymer.importHref – mishu Jun 05 '18 at 13:55
  • I'm not working with polymer in my app, i'm just importing polymer elements, and for all I care, for me they are just web components published on github. – malek yahyaoui Jun 06 '18 at 07:55
  • this response may resolve your problem https://stackoverflow.com/a/21649225 – raed Jun 06 '18 at 07:58
  • unfortunately it did not, the answer described there is what I already have. – malek yahyaoui Jun 06 '18 at 10:12
  • Have you tried to use JS to dynamically import the element? https://addyosmani.com/webcomponent-samples/polymer/modules/ After importing it dynamically, just make use of createElement() and set a different ID to each new element. – sam_dw Jun 06 '18 at 11:44

1 Answers1

0

So after all I figured it out, I was using some polymer components of different versions which produced a conflict that was the origin of the whole problem. Note that another thing that helped is adding each import link only when the widget is inserted instead of adding all the links at once before the widget adding begins. I hope that this helps someone else.

malek yahyaoui
  • 379
  • 3
  • 17