Dynamically generated templates with Polymer in the Chrome app
I am working on a Chrome app that has two main functions:
- Automatically create a user interface from a list of fields and data types provided by the connected device.
- Allow users to define and publish their own presentation for the user interface, and automatically apply that presentation when a device is connected.
I use Polymer and I find the best way to achieve # 2 is with custom polymer elements. Then I can just bind the variables from the device to the UI, and the custom template can define how to display and style them.
Thus, reaching the 1st level is a matter of automatically creating a polymer element from the input circuit. This is somewhat different from the usual approach, where I would presumably define a repeating pattern with conditional child patterns for each widget type.
So my questions are:
- How can I dynamically evaluate a polymer element / template from a remote source without breaking the Chrome App CSP and introducing significant XSS issues? (I hope the former protects me from the latter?)
- What's the easiest way to dynamically create markup for a Polymer element? Can I define a meta template and use the generated markup?
source to share
I'm not really sure why you are excluding using a predefined Polymer element with (admittedly complex) logic <template>
in it, but if you are sure you need things to be dynamic and generate element content on the fly while still using data binding by Polymer then injectBoundHTML()
might be what you are looking for.
Unfortunately it is not documented at the moment, but there are examples of how to use it in an open issue tracking documentation .
You can get "anchored" HTML from any source, and while I'm not a CSP expert, I don't believe this will trigger any further consideration of the CSP.
source to share