This element tag is used to listen the custom element’s lifecycle or a custom event sent by <send-event>
<element-flow>
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>