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 action tag is used to set an attribute of Custom Element. It’s rare case that we need to set an attribute. But in Realm it’s possible to do that.

Defined custom element attribute's name It can be static or dynamic, if this element tag has `from` attribute, then the value will be dynamic and the value itself should be a selector prefixed with `$.` notation. The data source selector, see the complete list on Data Source page. If it's present, then the state will be toggled between `true` and `false` based on the value of the state.

If you inspect the <my-element> from the devtools, you will see the owner attribute will changed once you click the button.

<custom-element name="my-element">
  <element-attr name="owner" type="string">No Owner</element-attr>
  <element-flow>
    <trigger-event click="Button">
      <set-attr name="owner" value="New Owner"></set-attr>
    </trigger-event>
  </element-flow>
  <template>
    <slot name="@owner"></slot>
    <button ref="Button">Click me!</button>
  </template>
</custom-element>

<my-element></my-element>
<br />
<my-element owner="R. Pracutian"></my-element>
No Owner