<x-html> - load partial HTML chunks into Polymer apps

[Marcin Warpechowski]

I am the creator of a <x-html> custom element. I use it in an experimental project, where I needed to dynamically load HTML templates into an app: https://github.com/PuppetJs/x-html

I decided that it was useful to wrap the code that I needed to write as a custom element, because it is potentially useful in other projects.

Comments and code reviews are very welcome.

[Marcin Warpechowski]

Also, please let me know if there is other recommended way to insert trusted HTML chunk from a variable. I think there isn't, though there were some threads on this group about how to achieve this calling some Polymer parsers from script, particularly:

- https://groups.google.com/forum/#!searchin/polymer-dev/html/polymer-dev/1Mrug0go9yY/Hzdlw7MJYwMJ

- https://groups.google.com/forum/#!searchin/polymer-dev/html/polymer-dev/CezP6rWnLz0/kFzZ7qRgbDEJ

[Marcin Warpechowski]

The following code stopped working with the recent changes in Canary (native HTML Imports with Web Plaftorm features enabled - see https://groups.google.com/d/topic/polymer-dev/TfkQpBU3Nb4/discussion)

HTMLImports.importer.load(container, function() {
  HTMLImports.parser.parse(container);
});

Any ideas how can I now parse a HTML Import from a string?

This puts inline “Hello World” import on screen. Now only works with Web Platform features flag disabled (Canary): http://puppetjs.github.io/x-html/examples/template_inline.html

Source: https://github.com/PuppetJs/x-html/blob/master/x-html.html

I know that polymer-project.org was using that internally for the menus (in app.js), but now it uses vulcanised <docs-menu> so I cannot get inspiration from there anymore.

Thanks!

[Steve Orvell]

On head, dynamic imports are now supported by the HTMLImports polyfill. We haven't done a polymer release with this support yet, but one is forthcoming.

This means you can create a link element, set its rel and href properties, add an onload listener and insert it into the document.

We've also included a helper mechanism for loading imports: HTMLImports.whenImportsReady(callback). This will notify you when the imports existing in the document at call time have all loaded.

Hope that helps.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/a3e72ae6-c3af-45fa-9c1d-69df4d5a368b%40googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

[Hajime Morrita]

On Mon, Feb 10, 2014 at 4:02 AM, Marcin Warpechowski <war...@gmail.com> wrote:

The following code stopped working with the recent changes in Canary (native HTML Imports with Web Plaftorm features enabled - see https://groups.google.com/d/topic/polymer-dev/TfkQpBU3Nb4/discussion)

Oops. I should've announced it earlier that I'm landing this bit. Sorry for disturbing :-(

It's coming, and --enable-html-imports flag is being removed.

 

HTMLImports.importer.load(container, function() {
  HTMLImports.parser.parse(container);
});

Any ideas how can I now parse a HTML Import from a string?

This puts inline “Hello World” import on screen. Now only works with Web Platform features flag disabled (Canary): http://puppetjs.github.io/x-html/examples/template_inline.html

Source: https://github.com/PuppetJs/x-html/blob/master/x-html.html

I know that polymer-project.org was using that internally for the menus (in app.js), but now it uses vulcanised <docs-menu> so I cannot get inspiration from there anymore.

Thanks!

On Wednesday, November 20, 2013 4:39:42 PM UTC+1, Marcin Warpechowski wrote:

Also, please let me know if there is other recommended way to insert trusted HTML chunk from a variable. I think there isn't, though there were some threads on this group about how to achieve this calling some Polymer parsers from script, particularly:

- https://groups.google.com/forum/#!searchin/polymer-dev/html/polymer-dev/1Mrug0go9yY/Hzdlw7MJYwMJ

- https://groups.google.com/forum/#!searchin/polymer-dev/html/polymer-dev/CezP6rWnLz0/kFzZ7qRgbDEJ

On Wednesday, November 20, 2013 3:58:01 PM UTC+1, Marcin Warpechowski wrote:

I am the creator of a <x-html> custom element. I use it in an experimental project, where I needed to dynamically load HTML templates into an app: https://github.com/PuppetJs/x-html

I decided that it was useful to wrap the code that I needed to write as a custom element, because it is potentially useful in other projects.

Comments and code reviews are very welcome.

Follow Polymer on Google+: plus.google.com/107187849809354688692

---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/a3e72ae6-c3af-45fa-9c1d-69df4d5a368b%40googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.

--
morrita

[Scott Miles]

More information here: http://stackoverflow.com/questions/21607663/dynamically-load-web-components-html-imports

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CALzNm5r%3D8Lgawt577uPz2UQQW4h79ZYgxq80w7K9OdSKGM_-xQ%40mail.gmail.com.

[Marcin Warpechowski]

Thanks Steve and Scott, that clarifies a lot. I added compatibility changes for the current versions of Polymer (0.1.4) and Canary. Once 0.1.5 is out, I will adopt Polymer.import or at least learn from it the proper way to do it.

I added some rationale to the README.md saying why x-html was created: https://github.com/puppetjs/x-html . Your feedback would be very welcome. I need this on a daily basis so I will update the project as long as there is no official way to do it.

@Hajime - no worries, actually I was expecting that to break since Steve's announcement about HTML Imports ( https://groups.google.com/d/topic/polymer-dev/TfkQpBU3Nb4/discussion ) but I did not have time to prepare the solution upfront.