dark Summary web-appcustom-elementelement-attrelement-stateelement-flowglobal-stateimport-elementimport-scriptimport-styleis-visibleis-hiddenrepeat-list trigger-eventlisten-event set-attrset-stateset-timersend-eventhttp-requestrequest-headerrequest-bodyresponse-okresponse-failscripttrigger-element Comparison OperatorsMutation OperatorsData Source
Summary web-appcustom-elementelement-attrelement-stateelement-flowglobal-stateimport-elementimport-scriptimport-styleis-visibleis-hiddenrepeat-list trigger-eventlisten-event set-attrset-stateset-timersend-eventhttp-requestrequest-headerrequest-bodyresponse-okresponse-failscripttrigger-element Comparison OperatorsMutation OperatorsData Source

This element tag is used to define a custom element’s state, and only allowed to be used inside a <custom-element> tag. The default value can be set using the HTML or content inside the tag.

To render the state’s value, use the <slot> tag with the attribute’s name as the slot’s name prefixed with # symbol.

Element state's name Element state's type (see supported types below) You can put any string inside the tag, as long as it's not contains any HTML tags. Any integer or floating point number is allowed. Only `true` or `false` is allowed. The default value must be a valid JSON array. The default value must be a valid JSON object. Similar to string but you can put any HTML tags inside the tag.

<custom-element name="my-element">
  <element-state name="content" type="html">
    <strong>Hello World</strong>
  </element-state>
  <template>
    Content:
    <slot name="#content"></slot>
  </template>
</custom-element>

<my-element></my-element>
Hello World