Dynamically import HTML template in Dart Polymer

1
votes

I've succedded in dynamically create a polymer component with dart and add to the dom.

But now I would like to do this WITHOUT having to statically import the HTML template at compile time.

In my use case I have a div container with id myContainer and a custom Polymer Dart component whose tag is my-tag.

I've tryied with:

LinkElement e = new LinkElement('link');
e.rel = 'import';
e.href= 'my-tag.html';
document.head.children.add(e);

$['myContainer'].children.add(new Element.tag('my-tag'));

But this ends up with the following exception :

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'. 
...

Note that the exception is raisen when the polymer element is added to the dom and not when adding the link tag. Also the same code works if adding the link at compile time and commenting the code that adds it at runtime.

I've tried also with several different variants of the code above, mainly adding the link tag in a separate method called before polymerInit or inside polymerInit().run(...) but nothing changes.

I'm wondering if this use case is even supported.

2
dartpolymerdart-polymer
Why do you not want to add the imports statically? I think Polymer transformers needs them when you build the project. – Günter Zöchbauer
Because I'd like to create a library of components that gets shown in a content area by a navigation framework as the user clicks around. I already need to import every component from dart side of the "navigator" but this is not so bad as I need to register the "routes". But I'm trying to find a way not to include the HTML templates too on the HTML side and minimize the work that need to be done to add a new "page". – Vittorio Ballestra
You can create a transformer. – Günter Zöchbauer
@GünterZöchbauer sounds interesting. Can you expand this concept ? – Vittorio Ballestra
I don't have experience with building transformers yet. A transformer is executed by pub build and pub serve and can analyze and modify the code during the build process. dartlang.org/tools/pub/assets-and-transformers.html, dartlang.org/tools/pub/transformers – Günter Zöchbauer

2 Answers

1
votes

It might be possible to create a transformer that does that. A transformer is executed by pub build and pub serve and can analyze and modify the code during the build process. dartlang.org/tools/pub/assets-and-transformers.html, dartlang.org/tools/pub/transformers

or

(I haven't tried it but I assume it will work)
You can create an HTML file containing all imports your package needs and the user of your package only needs to import this one file.

0
votes

Try to add an HeadElement:

 LinkElement e = new LinkElement();
 e.rel = 'import';
 e.href= 'my-tag.html';
 HeadElement h = new HeadElement();
 h.children.add(e);
 document.head.children.add(h);