loading... Pacem JS

Dynamic Panel

Consider PacemPanelElement as a general purpose <div>. It has the basic characteristics of a PacemElement (abstract visual class that allows css classes and inline css bindings) plus dynamic HTML content, just in case.

<pacem-panel><!-- content goes here --></pacem-panel>

Fairly sanitized HTML content can be injected via content property/attribute:

<pacem-data model="{{ '<script>alert(\'Nasty!\')</script><code>some content</code>' }}" id="htmlData"></pacem-data>

<!-- sanitized content pulled from outside -->
<pacem-panel content="{{ #htmlData.model  }}"></pacem-panel>

Otherwise, just render plain text via text property/attribute:

<pacem-data model="{ foo: 'bar', baz: 200 }" id="someData"></pacem-data>

<!-- plain text pulled from outside -->
<pacem-panel text="{{ JSON.stringify(#someData.model) }}"></pacem-panel>