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>