This element tag is used to define a custom element’s behaviors, and only allowed to be used inside a <custom-element> tag. Under this element tag, currently there only 2 tags allowed: <trigger-event> and <listen-event>, which is used to trigger and listen to events.

<custom-element name="my-element">
  <element-state name="count" type="number">0</element-state>
  <element-state name="content" type="html"></element-state>

  <element-flow>
    <trigger-event click="TheButton">
      <set-state name="count" value="1" mutate="+"></set-state>
      <set-state name="content" from="localState">
        New Value
        <strong>$.count</strong>
      </set-state>
    </trigger-event>
  </element-flow>

  <template>
    <button ref="TheButton">Click Me!</button>
    <br />
    <slot name="#content"></slot>
  </template>
</custom-element>

<my-element></my-element>