This element tag is used to listen the custom element’s lifecycle or a custom event sent by <send-event>, this element tag only allowed to be used inside a <element-flow> tag.

Please note that you only can use one of these attributes.

<!-- On mounted set `is-mounted` state to `yes` -->
<custom-element name="on-mounted-demo">
  <element-state name="is-mounted" type="string">no</element-state>
  <element-flow>
    <listen-event mounted>
      <set-state name="is-mounted" value="yes"></set-state>
    </listen-event>
  </element-flow>
  <template>
    <div>
      Is mounted?
      <slot name="#is-mounted"></slot>
    </div>
  </template>
</custom-element>

<mounted-event-demo></mounted-event-demo>

<custom-element name="statechanged-event-demo">
  <element-state name="updated" type="number"></element-state>
  <element-state name="content" type="string"></element-state>
  <element-flow>
    <trigger-event input="Input">
      <set-state name="content" value="$.target.value" from="event"></set-state>
    </trigger-event>
    <listen-event statechanged="content">
      <set-state name="updated" value="1" mutate="+"></set-state>
    </listen-event>
  </element-flow>
  <template>
    <div>
      Content state changed
      <slot name="#updated"></slot>
      x times.
    </div>
    <div><input ref="Input" /></div>
  </template>
</custom-element>

<statechanged-event-demo></statechanged-event-demo>

<custom-element name="custom-event-demo">
  <element-state name="color" type="string"></element-state>
  <element-flow>
    <listen-event on="change-color">
      <set-state name="color" from="event"></set-state>
    </listen-event>
    <trigger-event click="DynamicColorBtn">
      <send-event
        name="change-color"
        type="string"
        value="$.color"
        from="event:attr"></send-event>
    </trigger-event>
    <trigger-event click="StaticColorBtn">
      <send-event name="change-color" type="string" value="red"></send-event>
    </trigger-event>
  </element-flow>

  <template>
    <style>
      :host {
        display: block;
        background-color: var(--state-color);
        padding: 5px;
      }
    </style>
    <div>
      Selected Color:
      <slot name="#color"></slot>
    </div>
    <button color="teal" ref="DynamicColorBtn">Teal</button>
    <button color="hotpink" ref="DynamicColorBtn">Hotpink</button>
    <button ref="StaticColorBtn">Static color</button>
  </template>
</custom-element>

<custom-event-demo></custom-event-demo>