3

I'm working on a Chrome app which needs to do two main things:

  1. Automatically generate a UI from a list of fields and data types provided by an attached device.
  2. Allow users to define and share their own presentation for the UI and automatically apply that presentation when the device is attached.

I'm using Polymer, and I figure the best way to achieve #2 is with user-provided Polymer elements. Then, I can simply bind the variables from the device to the UI, and the user's template can determine how to display and style them.

Achieving #1, then, is a matter of automatically generating a polymer element from an input schema. This is somewhat different from the usual approach, where I'd presumably define a repeated template with conditional child templates for each type of widget.

My questions, then, are:

  1. How can I dynamically evaluate a polymer element/template from a remote source without violating the Chrome App's CSP, and without introducing significant XSS issues? (Hopefully, the former protects me from the latter?)
  2. What's the easiest way to dynamially generate markup for a Polymer element? Can I define a meta-template and use the generated markup?
1

1 Answer 1

1

I am not entirely sure why you rule out using a pre-defined Polymer element with (admittedly, complicated) <template> logic in it, but if you're sure that you need things to be dynamic and generate the element's content on the fly while still making use of Polymer's data binding, then injectBoundHTML() might be what you're looking for.

It's unfortunately not documented at the moment, but there are examples of how to use it in the open issue tracking the documentation.

You can fetch the "bound" HTML from any source, and while I'm not an expert on CSP, I don't believe that it will trigger any additional CSP consideration.

5
  • The only reason I ruled it out is because I want to be able to generate a default template that users can then edit for their particular device - rather than having to write one from scratch in order to perform any customisation at all. Nov 5, 2014 at 9:54
  • It's a little unclear to me if/when injectBoundHTML is required. The Polymer manual section on dynamic imports shows a way to inject an element using Javascript, and it doesn't seem to do any special handling to get the elements upgraded. When is and isn't this necessary? Nov 5, 2014 at 9:55
  • I haven't played around with dynamic imports much, but I guess that's another option, yeah. You could theoretically have a bunch of different HTML files that each had a different definition of what your <custom-element> was, and then import the appropriate one for each user. It's just a different approach to using a single "shell" element definition whose shadow DOM was populated at runtime via a network fetch and injectBoundHTML(). Nov 5, 2014 at 16:50
  • Sorry, I actually meant to link to imperative registration, which shows that simply setting innerHTML seems to be enough to get Polymer to recognise new elements - which makes me wonder why you need injectBoundHTML at all. Nov 5, 2014 at 17:09
  • I believe the main distinction between .innerHTML and injectBoundHTML() is covered at stackoverflow.com/questions/25433389 and has to do with dynamically modifying existing elements rather than registering new elements. If you want to register new elements then presumably dynamic imports or setting .innerHTML would work. Nov 6, 2014 at 20:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.