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>
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.