Summary References web-appcustom-elementelement-attrelement-stateelement-flowglobal-stateimport-elementimport-scriptimport-styleis-visibleis-hiddenrepeat-list Elements trigger-eventlisten-event Flows set-attrset-stateset-timersend-eventhttp-requestrequest-headerrequest-bodyresponse-okresponse-failscripttrigger-element Actions Comparison OperatorsMutation OperatorsData Source Misc
Summary References web-appcustom-elementelement-attrelement-stateelement-flowglobal-stateimport-elementimport-scriptimport-styleis-visibleis-hiddenrepeat-list Elements trigger-eventlisten-event Flows set-attrset-stateset-timersend-eventhttp-requestrequest-headerrequest-bodyresponse-okresponse-failscripttrigger-element Actions Comparison OperatorsMutation OperatorsData Source Misc
References Table of Contents

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.

Reference link: <trigger-event> trigger-event Reference link: <listen-event> listen-event Allowed Children

Example

<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>
Element: element-flow