<pacem-panel> is a <div> that binds: show/hide it, toggle its classes, set its style, fill it with HTML, all from bindings. Reach for it whenever a plain container needs to react to data.

<!-- a container that hides and restyles itself -->
<pacem-panel hide="{{ #banner.model.dismissed }}" css-class="{{ { 'fill-warning-container': #banner.model.urgent } }}">…</pacem-panel>

<!-- HTML content, from data -->
<pacem-panel content="{{ #article.model.html }}"></pacem-panel>

Usage

Show and hide. hide="{{ … }}" animates the panel out, then marks it hidden (and aria-hidden); false brings it back.

Restyle. css-class toggles classes: a { className: boolean } map, or an array of names. css sets inline style properties (custom properties included):

<pacem-panel css-class="{{ { 'fill-success-container': #order.model.paid } }}"
             css="{{ { width: #upload.model.percent + '%' } }}"></pacem-panel>

Bind the dynamic bits only: static classes stay in the plain class attribute, and css-class adds or removes its own on top.

Fill it. content renders an HTML string (or a DOM node) in place of the children; set it back to empty and they're gone. tooltip sets title and aria-label at once.

content strips <script> blocks, inline handlers (onclick, onerror…) and javascript: URLs. It's a safety net, not a full sanitizer (styles, iframes and forms pass): meant for HTML you trust (your API, your markdown).

Every Pacem visual element shares these members (they come from PacemElement): a panel is just the barest of them.

Examples

An upload progress bar

css drives the width, css-class the color once it's done.

HTML from data

A product description comes as HTML (here from a <pacem-data>, usually from your API): content renders it, and its <script> doesn't run.