Custom elements

Published pages ship with a bundle of custom elements. They are real web components, so they work in plain HTML with no framework, and they cooperate with the runtime attributes.

The elements

Opening and closing

Dialogs and drawers are driven either by an effect or by an action:

<button data-action="ui.dialog" data-payload='{"target":"#signup","mode":"open"}'>
  Sign up
</button>

<button data-action="cart.toggle">Cart</button>

<button data-action="ticket.create"
        data-payload="form"
        data-on-success="notify:Sent | close-dialog">Send</button>

ui.dialog, ui.drawer and ui.modal all take open, close or toggle. The close-dialog effect closes whichever dialog or drawer is nearest, which is usually what you want after a form succeeds.

They hold live content

Custom elements are ordinary containers, so runtime attributes work inside them:

<wm-drawer id="cart-drawer">
  <div data-source="cart.current">
    <div data-bind-each>
      <span data-bind="data.name"></span>
      <span data-bind="data.unitPrice" data-format="currency"></span>
      <button data-action="cart.remove" data-payload="this.id"
              data-on-success="refresh">Remove</button>
    </div>
  </div>
  <strong data-bind="cart.total" data-format="currency"></strong>
</wm-drawer>

In design mode

The elements bundle is loaded in preview and on the published page, but not while you are editing. That is deliberate — a tab component that actually switches tabs would hide the panels you are trying to edit, and a drawer would close itself. In the canvas you see the slot structure instead.

Preview the page to see them behave.

Containers the panel recognizes

When you configure runtime behavior visually, the property panel treats wm-tabs, wm-accordion, wm-slider, wm-grid and wm-mega-menu as containers — the same as div, section and ul — so you can attach a data source to them and repeat their children.

Related